Dependent multiselect dropdown using chosen and select2 plugins
<p>This is the code I have written in <strong>View</strong> :</p>

<pre><code>   &lt;div class="col-lg-12" style="margin-bottom: 20px;"&gt;
    &lt;div class="form-group"&gt;
        &lt;label class="col-sm-3 control-label" style=" margin-top: 14px; "&gt;Domains&amp;nbsp;&lt;font size="3" color="red"&gt;*&lt;/font&gt;&lt;/label&gt;
        &lt;br /&gt;

        &lt;div class="col-sm-4" style="width:50%;"&gt;
            @Html.ListBoxFor(m =&gt; m.SelectedDomains, Model.AllDomains,
         new { @class = "chosen", multiple = "multiple", id = "drpDomains", style = "width: 350px;",onchange="FillDomain();" })
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;




&lt;div class="col-lg-12" style="margin-bottom: 20px;"&gt;
    &lt;div class="form-group"&gt;
        &lt;label class="col-sm-3 control-label" style=" margin-top: 14px; "&gt;Domains new categories&amp;nbsp;&lt;font size="3" color="red"&gt;*&lt;/font&gt;&lt;/label&gt;
        &lt;br /&gt;

        &lt;div class="col-sm-4" style="width:50%;"&gt;
            @Html.ListBoxFor(m =&gt; m.SelectedDomainCategories, Enumerable.Empty&lt;SelectListItem&gt;(),
           new { @class = "select2", multiple = "multiple", id = "multidomaincategory", style = "width: 350px;" })
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;link href="~/Scripts/MultiSelect/chosen.css" rel="stylesheet" /&gt;
</code></pre>





<p>For Domains, I have used Chosen plugin, and for categories, i have used select2 plugin</p>

<pre><code> &lt;script type="text/javascript"&gt;
$(".chosen-deselect").chosen({ allow_single_deselect: true });
$(".chosen").chosen().change();
$(".chosen").trigger('liszt:updated');
&lt;/script&gt;

&lt;script&gt;
    function FillDomain() {
        $("#drpDomains option[value='']").removeAttr("selected");

        var selectArr = [];
        $('#drpDomains').each(function () {

            selectArr.push($(this).val());
        });
        var a = JSON.stringify(selectArr);

        var reference = this;
        $.ajax({
            url: @Url.Content("~/MyTemplate2/FillIndustry1"), //FillIndustry1 is a method in Controller
            type: "POST",
            dataType: "JSON",
            data: { Domain: a },
            success: function (DomainCategories) {

                $("#multidomaincategory").html("");

                $("#multidomaincategory").removeAttr("selected");
                var s = JSON.stringify(DomainCategories);

                var t = JSON.parse(s);

                for (var key in t) {

                    $("#multidomaincategory").append("&lt;option value=" + t[key]["Value"] + "&gt;" + t[key]["Text"] + "&lt;/option&gt;");
                } 

            },
            error: function (data) {
                alert("failure error" + data);
                var t = window.JSON.parse(data.d);
                alert("failueee" + t);
            }

        });
       //I'm trying to remove all the selected items from dependent dropdown (#multidomaincategory) when all items from Domains(#drpDomains) are cleared

        if ($("#drpDomains").val() == null || $("#drpDomains").val() == "") {

            $("#multidomaincategory").removeAttr("selected");
            $("#multidomaincategory").css('display', 'none');



           }
    }
&lt;/script&gt;
</code></pre>

<p>Controller :</p>

<pre><code>[HttpPost]
    public ActionResult FillIndustry1(string Domain)
    {
        JArray jsonMembersArr = (JArray)JsonConvert.DeserializeObject(Domain);//convert SymptomString from json string to array

        ProfessionalTrans objprofessionaltrans = new ProfessionalTrans();
        string listdomains = "";
        foreach (var a in jsonMembersArr)
        {

            listdomains = string.Join(",", a);
        }
        var DomainCategories = objprofessionaltrans.GetDepCategories(listdomains);

        return Json(DomainCategories.ToList());
    }
</code></pre>

<p>Data Access Layer(Transaction):</p>

<pre><code>public IEnumerable&lt;SelectListItem&gt; GetDepCategories(string domains)
    {
 //GetDepCategories method - To get categories based on Domains
        PTS_CommonEntities objentity = new PTS_CommonEntities();
        List&lt;SelectListItem&gt; allskills = new List&lt;SelectListItem&gt;();

        List&lt;GetCatListbasedDomain&gt; catnames = objentity.usp_GetCatListBasedOnDomains(domains).ToList();

        foreach (var it in catnames)
        {
            allskills.Add(new SelectListItem { Value = it.CategoryID.ToString(), Text = it.CategoryName });

        }    

        return allskills.AsEnumerable();
</code></pre>

<h2>        }</h2>

<p>When I am clearing(closing) the selected items in Domains, the respective Categories are cleared from list, but not in the text box</p>

<p>Image <a href="http://i.stack.imgur.com/Lhlc6.png" rel="nofollow">Before Clearing</a></p>

<p>Image <a href="http://i.stack.imgur.com/5GRC0.png" rel="nofollow">After Clearing the Domains</a></p>

<p>As you can see, the list is being cleared, but the selected items are still being shown in the UI.</p>

<p>Can someone please find out why the items are being displayed even after clearing them???</p>