如何选择和选择jquery?

时间:2016-02-19 10:45:20

标签: php jquery twitter-bootstrap

这是我的第一个选择框:

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

1 个答案:

答案 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');

});