基于第一个下拉菜单的引导多选动态选项答案

【问题标题】：Bootstrap multiselect dynamic options based on first dropdown基于第一个下拉菜单的引导多选动态选项
【发布时间】：2018-05-28 16:29:58
【问题描述】：

在我的页面上有 2 个下拉菜单，一个是“城市”的常规选择，另一个是使用引导程序对每个城市的“社区”进行多选。

第一个下拉列表中的选定选项将设置第二个下拉列表中的选项。我已经让它与常规选择一起使用，但是使用引导程序进行多选时，我无法根据选择来更改选项。

My original question and code

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

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 发现的，但是我无法让它工作。

【问题讨论】：

PSA - 如果您要对某个问题投反对票，那么您可能应该解释原因。

标签： javascript jquery html twitter-bootstrap select

【解决方案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>

【讨论】：

刚刚试了一下，好像还可以！我唯一需要更改的是在 js 函数中将“data-city”改为“data-val”以匹配我的代码。

【解决方案2】：

不应该是您更改多选值。我看到您使用的是#p-nhb 而不是多选。另外，为什么要触发两次 change 事件？

  .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】：

这是一个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();

如果这有帮助，请告诉我。

【讨论】：

它没有做任何事情。

【解决方案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 multi。
@RichJ ，在您的 original question 中，只有 #p-nhb 选择控件是多个。我的答案独立于第二种选择类型（我的代码 sn-p 已更新，但工作方式相似，您可以尝试再次运行）。还是您想使用多选来选择城市？