Estoy haciendo una aplicación MVC y tengo una lista desplegable de 3. Cuando cambia el valor de cualquiera o esos, carga una tercera multiselección de lista desplegable definida así

 @Html.DropDownListFor(model => model.ListEntityItem, Model.EntityItems, new { id = "lstData", multiple = "multiple" })

se carga asi

 function loadData() { var source = $("#ddlOrigin").val(); var entity = $("#ddlEntity").val(); $.ajax({ url: '@Url.Action("GetData","EntitySync")', data: { entity: entity, source: source }, cache: false, type: "POST", success: function (data) { document.body.style.cursor = "auto"; var markup = ""; $("#lstData").css("display", "block"); for (var x = 0; x < data.length; x++) { markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>"; } $("#lstData").append(markup).show(); $('#lstData').multiselect({ columns: 1, placeholder: 'Select Workflow Items', }); $('input[type=checkbox]').change(function () { if ($('input[type=checkbox]:checked').length > 0) $("#btnSync").prop("disabled", false); else $("#btnSync").prop("disabled", true); }); }, error: function (response) { } }) }

A partir de este momento... DropDownList lstData es inaccesible. Si quiero ocultarlo, no pasa nada.

 $("#lstData").css("visibility", "hidden");

Si cambio las opciones en la primera DropDownList... dibuja otra DropDownList... encima de la primera.

Leí diferentes páginas, pero nada funciona... aquí o aquí

Como puedo resolver esto..?

Gracias