这是我的第一个选择框:
echo "<select class='selectpicker abc' name='abc'>";
echo "<option ";
if ($abc == "a" ) {
echo 'selected ';
}
echo "value='a'>a</option>";
echo "<option ";
if ($abc == "b" ) {
echo 'selected ';
}
echo "value='b'>b</option>";
echo "<option ";
if ($abc == "c" ) {
echo 'selected ';
}
echo "value='c'>c</option>";
echo "</select>";
这是我的第二个选择框:
echo "<select class='selectpicker' name='select'>";
echo "<option class='op1'";
if ($select == 1 ) {
echo 'selected ';
}
echo "value='1'>1</option>";
echo "<option class='op5'";
if ($select == 5 ) {
echo 'selected ';
}
echo "value='5'>5</option>";
echo "</select>";
我想做的是:
如果我从a
选择.abc
,则会显示选项.op1
和.op5
。并选择值1
。如果我从b
选择c
或.abc
,则仅显示.op5
并选择值5
。
这是我的代码:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
$(".abc").change(function(){
if($(this).val() == 'a'){
$(".1").show();
}
if($(this).val() == 'b'){
$(".op1").hide();
$(".op1").removeAttr('selected');
$(".op5").setAttribute('selected','selected');
}
if($(this).val() == 'c'){
$(".op1").hide();
$(".op1").removeAttr('selected');
$(".op5").setAttribute('selected','selected');
}
});
但它不起作用。如果我从b
选择c
或.abc
,则会始终选择1
。不是5
。
答案 0 :(得分:1)
使用
更好$('.selector-1').prop('selected', true);
$('.selector-2').prop('selected', false);
另外你使用bootstrap-select插件,所以你可能需要强制它更新:
$('.selector-1').selectpicker('refresh');
<强> UPD:强>
也尝试这样的事情
$('.abs').on('change', function(){
var strValue = $(this).val();
var objSelect = $('select[name="select"]');
objSelect.find('option:selected').prop('selected', false);
if( strValue === 'a' )
objSelect.find('option[value="1"]').prop('selected', true);
else if( strValue === 'b' || strValue === 'c' )
objSelect.find('option[value="5"]').prop('selected', true);
objSelect.selectpicker('refresh').selectpicker('render');
});