基于第一个下拉菜单引导多选动态选项 [英] Bootstrap multiselect dynamic options based on first dropdown
问题描述
在我的页面上有2个下拉菜单，一个是城市"的常规选择，另一个是使用引导程序对每个城市的邻居"进行的多重选择.
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.
这是我正在尝试的代码-
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();
我尝试使用刷新，该刷新是从 HERE 中找到的.我无法使它正常工作.
I tried using refresh, which I found out about from HERE However I can not get it to work.
推荐答案
哈哈.这真的很简单.您只是错过了索引页面中不存在的 rebuild .只需CTRL + F 此处即可找到它^ _ ^
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>这篇关于基于第一个下拉菜单引导多选动态选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
