javascript - Bootstrap 选择器的链式下拉菜单不起作用

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)获取所选组合的值。在您的代码中，您始终使用第一个组合的值。

fiddle :http://jsfiddle.net/RUAS4/126/