带有引导选择选择器的链式下拉菜单不起作用

Question

我正在使用Bootstrap-select - Silvio Moreto 并有两个下拉选项。

<strong>Option 1</strong>
<select class="selectpicker" name="number">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<br />

<strong>Option 2</strong>
<select class="selectpicker" name="abc">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
    <option value="5">E</option>
</select>

而 jQuery 代码是：

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

现在我正在尝试的是：

• 如果用户从第一个选项中选择3，我想设置从第二个选项中选择的C 值，并使用与第二个选项相同的反向方法。
• 如果用户从第二个选项中选择C，我想设置从第一个选项中选择的3 值。

我编写了下面的 jQuery 代码，它仅适用于第一个选项，但不适用于第二个选项。

$('.selectpicker').on('change', function () {
    var opValue = $('.selectpicker').val();
    $('.selectpicker').val(opValue);
    $('.selectpicker').selectpicker('refresh');
});

注意：在我的示例中，值将相同且不会更改。

这里是 JSFiddle 示例代码：http://jsfiddle.net/user/mananpatel/

知道怎么做吗？

谢谢。

Answer 1

给你：

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

 $('.selectpicker').on('change', function () {
     var opValue = $(this).val();
     console.log(opValue);
     $('.selectpicker').val(opValue);
     $('.selectpicker').selectpicker('refresh');
 });

使用$(this) 获取所选组合的值。在您的代码中，您始终使用第一个组合的值。

小提琴：http://jsfiddle.net/RUAS4/126/

Answer 2

我就是这样做的：

$("select").change(function(){
    $("select").val($(this).val());
    $('.selectpicker').selectpicker('refresh');
});

JSFiddle