bootstrap selectpicker 的链接下拉列表不起作用

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
});

现在我正在尝试的是：

如果用户 select 3 来自第一个选项，我想设置 C 来自第二个选项的值 select 并且使用与第二个选项相同的反向方法。
如果用户 select C 来自第二个选项，我想设置 3 来自第一个选项的值 select。

我写了以下 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/

Answer 2

我是这样做的：

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

JSFiddle

bootstrap selectpicker 的链接下拉列表不起作用

Chained dropdown with bootstrap selectpicker not working

javascript

jquery

html

twitter-bootstrap

bootstrap-select