javascript - Dependent multiselect dropdown using chosen and select2 plugins -

this code have written in view :

   <div class="col-lg-12" style="margin-bottom: 20px;">     <div class="form-group">         <label class="col-sm-3 control-label" style=" margin-top: 14px; ">domains&nbsp;<font size="3" color="red">*</font></label>         <br />          <div class="col-sm-4" style="width:50%;">             @html.listboxfor(m => m.selecteddomains, model.alldomains,          new { @class = "chosen", multiple = "multiple", id = "drpdomains", style = "width: 350px;",onchange="filldomain();" })         </div>     </div> </div>     <div class="col-lg-12" style="margin-bottom: 20px;">     <div class="form-group">         <label class="col-sm-3 control-label" style=" margin-top: 14px; ">domains new categories&nbsp;<font size="3" color="red">*</font></label>         <br />          <div class="col-sm-4" style="width:50%;">             @html.listboxfor(m => m.selecteddomaincategories, enumerable.empty<selectlistitem>(),            new { @class = "select2", multiple = "multiple", id = "multidomaincategory", style = "width: 350px;" })         </div>     </div> </div>  <link href="~/scripts/multiselect/chosen.css" rel="stylesheet" /> 

for domains, have used chosen plugin, , categories, have used select2 plugin

 <script type="text/javascript"> $(".chosen-deselect").chosen({ allow_single_deselect: true }); $(".chosen").chosen().change(); $(".chosen").trigger('liszt:updated'); </script>  <script>     function filldomain() {         $("#drpdomains option[value='']").removeattr("selected");          var selectarr = [];         $('#drpdomains').each(function () {              selectarr.push($(this).val());         });         var = json.stringify(selectarr);          var reference = this;         $.ajax({             url: @url.content("~/mytemplate2/fillindustry1"), //fillindustry1 method in controller             type: "post",             datatype: "json",             data: { domain: },             success: function (domaincategories) {                  $("#multidomaincategory").html("");                  $("#multidomaincategory").removeattr("selected");                 var s = json.stringify(domaincategories);                  var t = json.parse(s);                  (var key in t) {                      $("#multidomaincategory").append("<option value=" + t[key]["value"] + ">" + t[key]["text"] + "</option>");                 }               },             error: function (data) {                 alert("failure error" + data);                 var t = window.json.parse(data.d);                 alert("failueee" + t);             }          });        //i'm trying remove selected items dependent dropdown (#multidomaincategory) when items domains(#drpdomains) cleared          if ($("#drpdomains").val() == null || $("#drpdomains").val() == "") {              $("#multidomaincategory").removeattr("selected");             $("#multidomaincategory").css('display', 'none');               }     } </script> 

controller :

[httppost]     public actionresult fillindustry1(string domain)     {         jarray jsonmembersarr = (jarray)jsonconvert.deserializeobject(domain);//convert symptomstring json string array          professionaltrans objprofessionaltrans = new professionaltrans();         string listdomains = "";         foreach (var in jsonmembersarr)         {              listdomains = string.join(",", a);         }         var domaincategories = objprofessionaltrans.getdepcategories(listdomains);          return json(domaincategories.tolist());     } 

data access layer(transaction):

public ienumerable<selectlistitem> getdepcategories(string domains)     {  //getdepcategories method - categories based on domains         pts_commonentities objentity = new pts_commonentities();         list<selectlistitem> allskills = new list<selectlistitem>();          list<getcatlistbaseddomain> catnames = objentity.usp_getcatlistbasedondomains(domains).tolist();          foreach (var in catnames)         {             allskills.add(new selectlistitem { value = it.categoryid.tostring(), text = it.categoryname });          }              return allskills.asenumerable(); 

}

when clearing(closing) selected items in domains, respective categories cleared list, not in text box

image before clearing

image after clearing domains

as can see, list being cleared, selected items still being shown in ui.

can please find out why items being displayed after clearing them???

because trying clear wrong element. #multidomaincategory select2 list holds of values, there dynamic span class gets rendered page right after element, @ html select2 produces in browser. try:

$('#multidomaincategory').next().find('li').html(''); 

they cleared list because $("#multidomaincategory").html(""); clears html of list of categories, not rendered text elements in text box.

although better way: $('#multidomaincategory').select2('data', null)