Question

在我的页面上有2个下拉列表，一个是“城市”的常规选择，另一个是使用每个城市的“邻域”的引导程序的多选。

第一个下拉列表中的选定选项将在第二个下拉列表中设置选项。我已经让它使用常规选择，但使用bootstrap进行多选，我无法根据选择获得更改选项。

这是我现在正在尝试的代码 -

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

我尝试使用刷新，我从HERE发现了但是我无法让它工作。

Answer 1

哈哈。这很简单。你只是错过了索引页面中不存在的rebuild。只需按CTRL + F here即可找到它^ _ ^

$(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>

Answer 2

不应该是你改变多选择值。我看到你正在使用＃p-nhb而不是多选。另外，为什么要两次触发更改事件？

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

Answer 3

这可能有助fiddle。

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

如果有帮助，请告诉我。

Answer 4

您可以使用hidden属性隐藏不可用的选项。使用data-* attributes设置邻域选择选项和城市输入值之间的关系。

$("[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>

基于第一个下拉列表的Bootstrap multiselect动态选项

4 个答案: