Bootstrap multiselect dynamic options based on first dropdown

问题

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.

回答1:

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>

回答2:

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();

回答3:

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.

回答4:

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>

来源：https://stackoverflow.com/questions/47815802/bootstrap-multiselect-dynamic-options-based-on-first-dropdown

标签

javascript

jquery

html

twitter-bootstrap

select