title: Change bootstrap multiselect values based on another select options, using jquery
body: <p>I have a simple form created using HTML and JS. There are 3 select elements that the options of the second and the third select elements are based on the first select option. The HTML code is below.</p>
  <pre><code>&lt;div class=&quot;d-flex flex-column&quot;&gt;
      &lt;label&gt;City&lt;/label&gt;
      &lt;select name=&quot;city&quot; class=&quot;city&quot; id=&quot;city-selection&quot;&gt;
          &lt;option selected=&quot;selected&quot; value=&quot;&quot;&gt;Select City&lt;/option&gt;
          &lt;option value=&quot;City 1&quot;&gt;City 1&lt;/option&gt;
          &lt;option value=&quot;City 2&quot;&gt;City 2&lt;/option&gt;
          &lt;option value=&quot;City 3&quot;&gt;City 3&lt;/option&gt;
          &lt;option value=&quot;City 4&quot;&gt;City 4&lt;/option&gt;
          &lt;option value=&quot;City 5&quot;&gt;City 5&lt;/option&gt;
          &lt;option value=&quot;City 6&quot;&gt;City 6&lt;/option&gt;
          &lt;option value=&quot;City 7&quot;&gt;City 7&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class=&quot;d-flex flex-column&quot;&gt;
      &lt;label&gt;Hotel&lt;/label&gt;
      &lt;select name=&quot;hotel&quot; class=&quot;hotel&quot; id=&quot;hotel-selection&quot;&gt;
          &lt;option selected=&quot;selected&quot; value=&quot;&quot;&gt;Select Hotel&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class=&quot;d-flex flex-column&quot;&gt;
      &lt;label&gt;Tours&lt;/label&gt;
      &lt;select name=&quot;tour&quot; class=&quot;tour&quot; id=&quot;tour-selection&quot; multiple=&quot;multiple&quot;&gt;
          &lt;option selected=&quot;selected&quot; value=&quot;&quot;&gt;Select Tours&lt;/option&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The first(<strong>#city-selection</strong>) and the second(<strong>#hotel-selection</strong>) select elements are just normal ones. But I changed the third(<strong>#tour-selecton</strong>) select element as a Bootstrap multi-select element. So the JS part is below.</p>
  <pre><code>//City 1 options
  var city1Hotels = '&lt;option selected=&quot;selected&quot; value=&quot;&quot;&gt;Select Hotel&lt;/option&gt;&lt;option value=&quot;City 1 Hotel 1&quot;&gt;City 1 Hotel 1&lt;/option&gt;';
  
  //City 2 options
  var city2Hotels = '&lt;option selected=&quot;selected&quot; value=&quot;&quot;&gt;Select Hotel&lt;/option&gt;&lt;option value=&quot;City 2 Hotel 1&quot;&gt;City 2 Hotel 1&lt;/option&gt;';
  var city2Tours = '&lt;option selected=&quot;selected&quot; value=&quot;&quot;&gt;Select Tours&lt;/option&gt;&lt;option value=&quot;City 2 Tour 1&quot;&gt;City 2 Tour 1&lt;/option&gt;&lt;option value=&quot;City 2 Tour 2&quot;&gt;City 2 Tour 2&lt;/option&gt;';
  
  var cityS = $(&quot;select#city-selection&quot;);
  var hotelS = $(&quot;select#hotel-selection&quot;);
  var tourS = $(&quot;select#tour-selection&quot;);
  
  //changing second and third select elements options based on first select element
  $(document).ready(function(){
      cityS.on('change',function(){
          if($(this).val()==&quot;City 1&quot;){
              hotelS.html(city1Hotels); //for hotel results based on a city
  
          }
          else if($(this).val()==&quot;City 2&quot;){
              hotelS.html(city2Hotels); //for hotel results based on a city
              tourS.html(city2Tours); //for tour results based on a city           
          }
      });
  });
  
  //set multiselect on third select element
  $(function() {
      &quot;use strict&quot;;
      $(document).ready(function() {
          $('#tour-selection').multiselect({
              includeSelectAllOption: false,});
      });  
  });
  </code></pre>
  <p><strong>The Issue</strong><br></p>
  <hr>
  When I select a city from #city-selection, the #hotel-selection show results properly based on the city entries. But when it comes to #tour-selection, it doesn't show me tours when I selected a city. However, if I remove the multi-select function it shows me all the tours based on the cities. But then the user can select only one option. So it's not my intention and I think the issue with the multi-select. Currently, I have used if-else to change decisions based on the cities. If someone can help me, I'll be much appreciated it!
  <p><br><strong>For More information:</strong></p>
  <hr>
  I used this documentation to add bootstrap multi-select. https://davidstutz.github.io/bootstrap-multiselect/
  <br> When I add custom options to the third(#tour-selection) select element using HTML to check it, the multi-select feature works properly. But decision-based selection still not working.