Populating options for JQuery multiple select


 <script src="https://js.arcgis.com/4.25/"></script>
 <script src="https://cdn.jsdelivr.net/gh/harvesthq/chosen@gh-pages/docsupport/jquery-3.2.1.min.js"></script>
 <script src="https://cdn.jsdelivr.net/gh/harvesthq/chosen@gh-pages/chosen.jquery.min.js"></script>
 <link href="https://cdn.jsdelivr.net/gh/harvesthq/chosen@gh-pages/chosen.min.css" rel="stylesheet">
 <script>
 $(document).ready(function() {   
     $(".chosen-select").chosen({
         no_results_text: "Oops, nothing found!"
     })
 });
</script>
<script>

var dict1 = {'Canada': ['', 'Toronto'],'USA': ['', 'Hawaii']};
var dict2= {'Toronto': ['','A', 'B'],Hawaii': ['C', 'D']};
var dict3 = {'A': ['Item1', 'Item2'],
          'B': ['Item3', 'Item4'],
          'C': ['Item5', 'Item6'],
          'D': ['Item7', 'Item8']
};
var regionOption = document.querySelector("#municipality");
var districtOption = document.querySelector("#districtName");
var provOption = document.querySelector("#region");
var neighOption = document.querySelector("#selectNeigh");
     
createOption(provOption, Object.keys(regions));
     
provOption.addEventListener('change', function() {
     createOption(regionOption, dict1[provOption.value]);
});
regionOption.addEventListener('change', function() {
      createOption(districtOption, dict2[regionOption.value]);
});
districtOption.addEventListener('change', function() {
        createOption(neighOption, dict3[districtOption.value]);
 });
  function createOption(dropDown, options) {
      dropDown.innerHTML = '';
          options.forEach(function(value) {
               dropDown.innerHTML += '<option name="' + value + '">' + value + '</option>';
           });
  };
</script>
 
<body>
    <select id="region" style="width: 125px;"></select>
    <select id="municipality" style="width: 125px;"></select>
    <select id="districtName" style="width: 125px;"></select>
    <form action="http://httpbin.org/post" method="post">
         <select data-placeholder='Select Neighbourhoods' id="selectNeigh" multiple class='chosen-select'style="width: 125px;"></select>
    </form>
</body>

So my current code works fine if I use the regular html multiple select. However, when I implement the following code: HTML: Select multiple as dropdown. The options are no longer being populated for select eight. Can someone please help me out.

Solution

From https://harvesthq.github.io/chosen/

If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "chosen:updated" event on the field. Chosen will re-build itself based on the updated content.

$("#form_field").trigger("chosen:updated");

So you have trigger the update event in your createOption function.

  function createOption(dropDown, options) {
      dropDown.innerHTML = '';
          options.forEach(function(value) {
               dropDown.innerHTML += '<option name="' + value + '">' + value + '</option>';
           });
      
       $(".chosen-select").trigger("chosen:updated");
  };