2017-01-16 61 views
2

我是bootstrap-selectpicker的新手。我有两个选择字段。我想知道如何根据第一个selectpicker的选择更新第二个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代码初始化二者selectpickers。我错过了什么吗?或者这是初始化的错误方法?有人可以提供一个使用多个bootstrap-selectpickers的例子吗?

回答

2

你可以做

$('.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

1

试试这个,我希望这将工作 如果您的第一选择值是1,那么在第二个选择是只选择相同的值作为第一选择

$("#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); 
}); 
0

您可以初始化它们seprately如果你想通过ID但它不是neccesarily需要:

$('#id1').selectpicker({ 
    style: 'btn-info', 
    size: 4 
}); 
$('#id2').selectpicker({ 
    style: 'btn-info', 
    size: 4 
}); 

要根据第一选择是容易更新selectpicker的第二个值。 当您更改第一selectpicker的价值,你应该只获得第一个的值与

var result = $('select[name=name1]').val(); 

然后将其设置到另一个

$('select[name=name2]').val(result); 
$('#id2').selectpicker('refresh'); 
相关问题