Обновить значение второго выбора начальной загрузки при выборе первого выбора начальной загрузки

Question

Я новичок в bootstrap-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. Я что-то упускаю? Или это неправильный способ инициализации? Может ли кто-нибудь предоставить пример использования нескольких бутстрапов-selectpickers?

Answer 1

Вы можете сделать

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

Answer 2

попробовать это я надеюсь, что это будет работать , если ваш первый выбор значение равно 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); 
}); 

Answer 3

Вы можете инициализировать их 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');