Bootstrap multiselect dynamic options based on first dropdown

Question

On my page there are 2 dropdowns, one is a regular select for "Cities" and the other one is a multiselect using bootstrap for "Neighborhoods" of each City.

The selected option on the first dropdown will set the options on the second dropdown. I already have it working with regular selects, but with multiselect using bootstrap, I am unable to get the options to change based on the selection.

My original question and code

This is the code I am trying now --

var select_clone = $('<select>')
  .html($('#p-nhb option'))
  .hide()
  .insertAfter('#p-nhb');

$('#p-city')
  .change(function() {
    $('#p-nhb').html(select_clone.find('[data-val="' + this.value + '"]').clone());
$('.multi-select').multiselect('refresh');
  })
  .change();

I tried using refresh, which I found out about from HERE However I can not get it to work.

PSA - If you're going to down vote a question then you should probably explain why. — 730wavy, Dec 27 '17 at 08:36

score 1 · Accepted Answer · answered Dec 24 '17 at 19:06

haha. this is really simple. you just miss rebuild which is not exists in the index page. just CTRL+F here to find it ^_^

$(function(){
  var select_clone = $('<select>')
   .html($('#p-nhb option'))
   .hide()
   .insertAfter('#p-nhb');
  
  $('#p-nhb').multiselect();
  
  $('#p-city').change(function(){
   $('#p-nhb').html(select_clone.find('[data-city="' + this.value + '"]').clone());
   $('#p-nhb').multiselect('rebuild');
  }).change();
  
  $('#get').click(function(){
   console.log('city: '+$('#p-city').val()+', neighborhood: '+$('#p-nhb').val().toString());
  });
 });

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css"/> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
</head>
<body>

<select name="property_city" id="p-city">
 <option value="" selected>all</option>
 <option value="a" >a</option>
 <option value="b" >b</option>
 <option value="c" >c</option>
</select>
<br>
<select name="property_nhb[]" id="p-nhb" multiple>
    <option data-city="" value="" selected>all</option>
    <option data-city="a" value="a1">a1</option>
    <option data-city="a" value="a2">a2</option>
    <option data-city="a" value="a3">a3</option>
    <option data-city="a" value="a4">a4</option>
    <option data-city="b" value="b1">b1</option>
    <option data-city="b" value="b2">b2</option>
    <option data-city="b" value="b3">b3</option>
    <option data-city="b" value="b4">b4</option>
    <option data-city="c" value="c1">c1</option>
    <option data-city="c" value="c2">c2</option>
    <option data-city="c" value="c3">c3</option>
    <option data-city="c" value="c4">c4</option>
</select>
<br>
<button id="get">get value</button>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>

</body>
</html>

Just tried it out and it seems to work! Only thing I had to change was in the js function where it says "data-city" to "data-val" to match my code. — 730wavy, Dec 26 '17 at 02:38

score 0 · Answer 2 · answered Dec 14 '17 at 15:16

0

Isnt it supposed to be that you change the multi select values. I see you are using #p-nhb instead of the multiselect. Also, why are you triggering the change event twice?

  .html($('#p-nhb option'))
  .hide()
  .insertAfter('#p-nhb');

$('#p-city')
  .change(function() {
    $('.multi-select').html(select_clone.find('[data-val="' + this.value + '"]').clone());
$('.multi-select').multiselect('refresh');
  })
  .change();

answered Dec 14 '17 at 15:16

blackmambo

152
1
2
16

To understand better I linked the original question. As far as your suggestion, thanks but it didn't do anything. – 730wavy Dec 15 '17 at 00:28

score 0 · Answer 3 · answered Dec 20 '17 at 18:12

This is a fiddle that might help.

Html:

<p>
<select name="property_city" id="p-city">
  <option class="button" value="new-york-city" selected>New York City</option>
  <option class="button" value="">All</option>
  <option class="button" value="dallas-tx">Dallas, TX</option>
  <option class="button" value="las-vegas">Las Vegas, NV</option>
  <option class="button" value="los-angeles">Los Angeles, CA</option>
  <option class="button" value="miami">Miami, FL</option>
  <option class="button" value="new-york-city">New York City, NY</option>
  <option class="button" value="san-francisco">San Francisco, CA</option>
  <option class="button" value="seattle-wa">Seattle, WA</option>
</select>
</p>

<p>
<select name="property_nhb[]" id="p-nhb" multiple>
  <option class="button">All</option>
  <option data-val="los-angeles" value="beverly-hills" >Beverly Hills</option>
  <option data-val="los-angeles" value="santa-monica" >Santa Monica</option>
  <option data-val="miami" value="hialea" >Hialea</option>
  <option data-val="miami" value="little-havana">Little Havana</option>
  <option data-val="miami" value="north-miami">North Miami</option>
  <option data-val="miami" value="south-beach">South Beach</option>
  <option data-val="new-york-city" value="chelsea">Chelsea</option>
  <option data-val="new-york-city" value="harlem">Harlem</option>
  <option data-val="new-york-city" value="noho">NoHo</option>
  <option data-val="new-york-city" value="soho">SoHo</option>
</select>
</p>

JS:

var select_clone = $('<select>')
  .html($('#p-nhb option'))
  .hide()
  .insertAfter('#p-nhb');

    $('#p-city')
      .change(function() {

        $('#p-nhb').html(select_clone.find('[data-val="' + this.value + '"]').clone());
        $('#p-nhb').multiselect('refresh');
      })
      .change();

Let me know if this helps.

It didnt do anything in the fiddle. – 730wavy Dec 20 '17 at 19:36 — 730wavy, Dec 20 '17 at 19:36

Alexander · Answer 4 · 2017-12-25T03:30:24.020

You could hide unavailable options using hidden attribute. Use data-* attributes to set relations between neighborhoods select options and values of city input.

$("[name=city]").change(function() {
  var city = $(this).val();
  $("[name=neighborhood] option[data-city]")
    .attr("hidden", "hidden")
    .filter(function() {
      return $(this).data("city") == city;
    })
    .removeAttr("hidden");
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<div class="form-group">
  <label for="city">City</label>
  <select id="city" name="city" class="form-control">
  <option selected>Select city</option>
  <option value="A">City A</option>
  <option value="B">City B</option>
  <option value="C">City C</option>
</select>
</div>
<div class="form-group">
  <label for="neighborhood">Neighborhoods</label>
  <select id="neighborhood" name="neighborhood" class="form-control" multiple="multiple">
    <option value="1" data-city="A" hidden="hidden">Neighborhood A1</option>
    <option value="2" data-city="A" hidden="hidden">Neighborhood A2</option>
    <option value="3" data-city="A" hidden="hidden">Neighborhood A3</option>
    <option value="4" data-city="B" hidden="hidden">Neighborhood B1</option>
    <option value="5" data-city="B" hidden="hidden">Neighborhood B2</option>
    <option value="6" data-city="C" hidden="hidden">Neighborhood C1</option>
    <option value="7" data-city="C" hidden="hidden">Neighborhood C2</option>
  </select>
</div>

This is for bootstrap multiselect dropdowns. I know how to do it for regular select dropdowns, my issue is the bootstrap multi. — 730wavy, Dec 24 '17 at 17:51
@RichJ , in your [original question](https://stackoverflow.com/q/47027361/7914637) only the `#p-nhb` select control is multiple. My answer works independently of second select type (my code snippet has been updated, but works alike, you could try to run again). Or do you want to use multiple select for city choice? — Alexander, Dec 25 '17 at 02:52

Bootstrap multiselect dynamic options based on first dropdown

4 Answers4

Linked