[英]Chained dropdown with bootstrap selectpicker not working
I am using Bootstrap-select - Silvio Moreto and having two drop-down options. 我正在使用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>
and jQuery code is: jQuery代码是:
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4
});
Now what I am trying is: 现在我正在尝试的是:
3
from First Option, I want to set C
value selected from Second Option and same reverse method with Second Option is used. 3
,则我要设置从“第二选项”中选择的C
值,并使用与“第二选项”相同的反向方法。 C
from Second Option, I want to set 3
value selected from First Option. C
,我想设置从“第一个选项”中选择的3
值。 I have wrote bellow jQuery code and it is working with only First Option but not with Second Option. 我已经写了下面的jQuery代码,它仅适用于First Option,而不适用于Second Option。
$('.selectpicker').on('change', function () {
var opValue = $('.selectpicker').val();
$('.selectpicker').val(opValue);
$('.selectpicker').selectpicker('refresh');
});
NOTE: In my example value will be same and it will be not change. 注意:在我的示例中,值将相同,并且不会更改。
Here is JSFiddle sample code: http://jsfiddle.net/user/mananpatel/ 这是JSFiddle示例代码: http : //jsfiddle.net/user/mananpatel/
Any idea how to do it? 知道怎么做吗?
Thanks. 谢谢。
Here you go: 干得好:
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4
});
$('.selectpicker').on('change', function () {
var opValue = $(this).val();
console.log(opValue);
$('.selectpicker').val(opValue);
$('.selectpicker').selectpicker('refresh');
});
Use $(this)
to get the value of the selected combo. 使用
$(this)
获取所选组合的值。 In your code you are always using the value of the first combo. 在您的代码中,您始终使用第一个组合的值。
Fiddle : http://jsfiddle.net/RUAS4/126/ 小提琴: http : //jsfiddle.net/RUAS4/126/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.