Andrea Andrea - 3 months ago 24
HTML Question

MVC multiselect dropdown based on other multiselect dropdown

I am tryng to show/hide elements in a multiselect dropdown, based on the selection in another multiselect dropdown. Anyway, when I use the multiselect plugin
I am not able to show/hide the elements. My code looks like this:

@Html.DropDownList("CompanyDropDown", new MultiSelectList(ViewBag.CompanyList,
"COD_COMPANY", "DESCRIPTION", null), new
{
multiple = "multiple",
@class = "multiselect",
onchange = "CompanyDropDownOnChange()"
})


@Html.DropDownList("FlowDropDown", new MultiSelectList(ViewBag.ActiveFlow,
"ID_FLOW", "DESCRIPTION", null), new
{
multiple = "multiple",
@class = "multiselect",
})


and the javascript part is here:

jQuery(function ($) {
$("select").multiselect();
});
function CompanyDropDownOnChange() {
$("#FlowDropDown option[value=11]").css('display', 'none');
}


The sample should just hide the flow with id=11 in the second dropdown, when a company in the first dropdown is selected.

Answer

I did some testing with a scenario like yours and found out that you were altering the wrong elements.

function CompanyDropDownOnChange() {
 $("input[name=multiselect_FlowDropDown][value=11]").closest('li').css('display', 'none');
}

Please, refer to this plunker for more details.