基于第一个下拉菜单的引导多选动态选项
Posted
技术标签:
【中文标题】基于第一个下拉菜单的引导多选动态选项【英文标题】：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 - 如果您要对某个问题投反对票，那么您可能应该解释原因。 【参考方案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 已更新，但工作方式相似，您可以尝试再次运行）。还是您想使用多选来选择城市？以上是关于基于第一个下拉菜单的引导多选动态选项的主要内容，如果未能解决你的问题，请参考以下文章