javascript - Chosen JS Drop-down list not updating -

i have 3 drop-down lists: region, location, , person. can select region, filters locations, , select location, filters people there. if select person first, select region , location. if click view persons drop-down list, see people @ location. issue appeared when added chosen.js make people drop down list searchable. when added it, people drop down list no longer filtering.

region ddl:

                <div class="col-md-3">                 @html.label("region", new {@class="control-label", @for="region"})                 <select name="region" id="region" class="form-control input-md">                     <option value=""></option>                     @foreach (var elem in model.regions)                     {                         if (model.person != null){                             if (model.person.region.equals(elem.name))                             {                                 <option value="@elem.name" selected="selected">@elem.name</option>                             } else {                                 <option value="@elem.name">@elem.name</option>                             }                         } else {                             <option value="@elem.name">@elem.name</option>                         }                      }                 </select>             </div> 

location ddl:

                <div class="col-md-3">                 @html.label("location", new {@class="control-label", @for="location"})                 <select name="location" id="location" class="form-control input-md">                     <option value=""></option>                     @foreach (var elem in model.locations)                     {                         if (model.person != null){                             if (model.person.location.equals(elem.name))                             {                                 <option data-regionid="@elem.region" value="@elem.name" selected="selected" >@elem.name</option>                             } else {                                 <option data-regionid="@elem.region" value="@elem.name">@elem.name</option>                             }                         } else {                                 <option data-regionid="@elem.region" value="@elem.name">@elem.name</option>                         }                     }                 </select>             </div> 

person ddl:

                <div class="col-md-3">                 @html.label("person", new {@class="control-label", @for="person"})                 <select name="person" id="person" class="form-control input-md chosen-select">                     <option value=""></option>                     @foreach (var elem in model.person)                     {                         if (model.personid.equals(elem.id)){                             <option data-regionid="@elem.region" data-locationid="@elem.location" value="@elem.id" selected="selected">@elem.name (@elem.location)</option>                         }                     }                 </select>             </div> 

here javascript filters drop downs:

    locations = $("#location > option").clone(); persons = $("#person > option").clone();   $("#region").change(function () {     if ($("#region").val().length != 0) {         filterdropdown("#location", locations, "regionid", $("#region").val());         filterdropdown("#person", persons, "regionid", $("#region").val());     } else {         $("#location").html(locations.clone());         $("#person").html(persons.clone());          $("#location").val("");         $("#person").val("");     } });  function resetdropvals(list) {     $(list).each(function (index, item) {         $(item).removeattr("selected");     }); }  $("#location").change(function () {     if ($("#location").val().length > 0) {         if ($("#region").val().length == 0) {             var selectedlocation = $("#location").val();              filterparent("#region", "#location", "regionid");             filterdropdown("#location", locations, "regionid", $("#region").val());              $("#location").val(selectedlocation);         }         filterdropdown("#person", persons, "locationid", $("#location").val());     } else {         if ($("#region").val().length > 0) {             filterdropdown("#person", persons, "regionid", $("#region").val());         } else {             $("#person").html(persons.clone());             $("#person").val("");         }     }  });  function filterparent(parentdd, childdd, dataname) {     if ($(parentdd).val().length == 0) {         $(parentdd + " option").each(function (index, item) {             if ($(item).val() == $(childdd + " option:selected").data(dataname)) {                 $(parentdd).val($(item).val());             }         });     } }  $("#person").change(function () {     if ($("#person").val().length > 0) {         var selectedperson = $("#person").val();          filterparent("#location", "#person", "locationid");         filterdropdown("#person", persons, "locationid", $("#location").val());          var selectedlocation = $("#location").val();          filterparent("#region", "#location", "regionid");         filterdropdown("#location", locations, "regionid", $("#region").val());          $("#person").val(selectedperson);         $("#location").val(selectedlocation);     } });   function filterdropdown(ddname, optionlist, dataname, groupval) {     $(ddname).html("");     $(ddname).append("<option></option");     $(optionlist).each(function (index, item) {         if ($(item).data(dataname) == groupval) {             $(ddname).append($(item).clone());         }     }); }  }); 

any idea why chosen stopping drop-down list filtering when values in other lists selected? don't see how interfering. thanks!

when using chosen, drop down lists need manually updated after filter events called:

$(".chosen-select").trigger("chosen:updated");