在第一个 bootstrap select 的 select 上更新第二个 bootstrap select 的值
Update value of second bootstrap select on select of first bootstrap select
我是 bootstrap-selectpicker 的新手。我有两个 select 字段。我想知道如何根据第一个 selection 更新第二个 selectpicker 的值。
<select id="id1" name="name1" class="selectpicker" data-live-search="true">
<option value="A">AAA</option>
<option value="B">BBB</option>
</select>
<select id="id2" name="name2" class="selectpicker" data-live-search="true">
<option value="A">AAA</option>
<option value="B">BBB</option>
<option value="C">CCC</option>
<option value="D">DDD</option>
</select>
Javascript代码:
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4
});
上面的 JS 代码初始化了两个 select选择器。我错过了什么吗?或者这是错误的初始化方式?有人可以提供使用多个 bootstrap-selectpickers 的示例吗?
试试这个,我希望它能奏效
如果您的第一个 select 值为 1,那么第二个 select 将 select 与第一个 select
的值相同
$("#select1").change(function(){
if ($(this).data('options') == undefined){
$(this).data('options', $('#select2 option').clone());
} var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
如果您愿意,可以通过 ID 单独初始化它们,但这不是必需的:
$('#id1').selectpicker({
style: 'btn-info',
size: 4
});
$('#id2').selectpicker({
style: 'btn-info',
size: 4
});
根据第一个 select 更新 selectpicker 的第二个值很容易。
当您更改第一个 selectpicker 的值时,您应该只获取第一个
的值
var result = $('select[name=name1]').val();
然后设置为另一个
$('select[name=name2]').val(result);
$('#id2').selectpicker('refresh');
你可以做到
$('.selectpicker').on('changed.bs.select', function (e) {
if($(this).attr('name')=="name2"){
$(".selectpicker[name='name1']").val(/*set value*/);
}
else{
$(".selectpicker[name='name2']").val(/*set value*/);
}
});
changed.bs.select
是图书馆的一个活动,你可以看看here
我是 bootstrap-selectpicker 的新手。我有两个 select 字段。我想知道如何根据第一个 selection 更新第二个 selectpicker 的值。
<select id="id1" name="name1" class="selectpicker" data-live-search="true">
<option value="A">AAA</option>
<option value="B">BBB</option>
</select>
<select id="id2" name="name2" class="selectpicker" data-live-search="true">
<option value="A">AAA</option>
<option value="B">BBB</option>
<option value="C">CCC</option>
<option value="D">DDD</option>
</select>
Javascript代码:
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4
});
上面的 JS 代码初始化了两个 select选择器。我错过了什么吗?或者这是错误的初始化方式?有人可以提供使用多个 bootstrap-selectpickers 的示例吗?
试试这个,我希望它能奏效 如果您的第一个 select 值为 1,那么第二个 select 将 select 与第一个 select
的值相同$("#select1").change(function(){
if ($(this).data('options') == undefined){
$(this).data('options', $('#select2 option').clone());
} var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
如果您愿意,可以通过 ID 单独初始化它们,但这不是必需的:
$('#id1').selectpicker({
style: 'btn-info',
size: 4
});
$('#id2').selectpicker({
style: 'btn-info',
size: 4
});
根据第一个 select 更新 selectpicker 的第二个值很容易。 当您更改第一个 selectpicker 的值时,您应该只获取第一个
的值var result = $('select[name=name1]').val();
然后设置为另一个
$('select[name=name2]').val(result);
$('#id2').selectpicker('refresh');
你可以做到
$('.selectpicker').on('changed.bs.select', function (e) {
if($(this).attr('name')=="name2"){
$(".selectpicker[name='name1']").val(/*set value*/);
}
else{
$(".selectpicker[name='name2']").val(/*set value*/);
}
});
changed.bs.select
是图书馆的一个活动,你可以看看here