使用 bootstrap-select.js 根据第一个下拉菜单更改第二个下拉菜单的选项
Change the options of a second dropdown based on first dropdown using the bootstrap-select.js
我正在尝试根据第一个下拉列表的选择更改第二个下拉列表的选项。
代码如您所见here。但是因为它不起作用,因为我使用了 bootstrap-select.js。我加这个的原因是为了有一个很好的多重效果选择。
貌似是因为在JS之后不再是简单的<select>
加上<option>
了,但是不知道怎么解决
这是代码
<select class="form-control" id="choice1">
<option value="Food">Food</option>
<option value="Fruit">Fruit</option>
</select>
<select class="selectpicker" multiple id="choice2">
<option data-option="Food" value="M">Mustard</option>
<option data-option="Food" value="M">Ketchup</option>
<option data-option="Fruit" value="M">Apple</option>
<option data-option="Fruit" value="M">Orange</option>
</select>
$("#choice1").change(function() {
if(typeof $(this).data('options') === "undefined") {
$(this).data('options',$('#choice2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[data-option=' + id + ']');
$('#choice2').html(options);
});
Bootstrap-select.js 有一个 refresh
方法可以使用。您的 JS 代码将如下所示:
$("#choice1").change(function () {
if (typeof $(this).data('options') === "undefined") {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#choice2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[data-option=' + id + ']');
$('#choice2').html(options);
//Refresh #choice2 to show the new values
$('#choice2').selectpicker('refresh');
});
Here 是一个工作演示。
我正在尝试根据第一个下拉列表的选择更改第二个下拉列表的选项。
代码如您所见here。但是因为它不起作用,因为我使用了 bootstrap-select.js。我加这个的原因是为了有一个很好的多重效果选择。
貌似是因为在JS之后不再是简单的<select>
加上<option>
了,但是不知道怎么解决
这是代码
<select class="form-control" id="choice1">
<option value="Food">Food</option>
<option value="Fruit">Fruit</option>
</select>
<select class="selectpicker" multiple id="choice2">
<option data-option="Food" value="M">Mustard</option>
<option data-option="Food" value="M">Ketchup</option>
<option data-option="Fruit" value="M">Apple</option>
<option data-option="Fruit" value="M">Orange</option>
</select>
$("#choice1").change(function() {
if(typeof $(this).data('options') === "undefined") {
$(this).data('options',$('#choice2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[data-option=' + id + ']');
$('#choice2').html(options);
});
Bootstrap-select.js 有一个 refresh
方法可以使用。您的 JS 代码将如下所示:
$("#choice1").change(function () {
if (typeof $(this).data('options') === "undefined") {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#choice2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[data-option=' + id + ']');
$('#choice2').html(options);
//Refresh #choice2 to show the new values
$('#choice2').selectpicker('refresh');
});
Here 是一个工作演示。