使用jquery基于选择值项更改css

Question

Fiddle

我有一个jquery就是这样，如果所选的值是“＆lt;＆gt;”（之间）我想改变要显示的样式：阻止到输入框..但是这里所有选中的项目css是改变

$(document).ready(function () {
    $('.condition-change').change(function () {
        if ($('select[name="SearchCondition"]').find('option[value="<>"]').attr("selected", true)) {
            $('.second-value').css("display", "block");
        }
    });
});

Answer 1

尝试，

$('.condition-change').change(function () {
    if($(this).val().trim() === '<>') {
        $('.second-value').show();
    }
});

DEMO

或者

$('.condition-change').change(function () {
    $('.second-value').toggle($(this).val().trim() === '<>');
});

DEMO I

Answer 2

您只需要访问使用val（）可以获得的选定选项值，因此将条件置于val（），

<强> Live Demo

$(document).ready(function () {
    $('.condition-change').change(function () {
        if ($(this).val() == "<>") {
            $('.second-value').css("display", "block");
        }
    });
});

还使用show and hide而不是设置css。

<强> Live Demo

$(document).ready(function () {
    $('.condition-change').change(function () {
        if ($(this).val() == "<>") 
            $('.second-value').show();
        else
            $('.second-value').hide();
    });
});

Answer 3

错误的条件

$(document).ready(function () {
$('.condition-change').change(function () {
    if($('select[name="SearchCondition"]').find('option[value="<>"]').prop("selected")==true)
    {
        $('.second-value').css("display", "block");
    }

});

});

Answer 4

//添加.is（“：checked”）函数来检查“＆lt;＆gt;”选择值选项

 $(document).ready(function () {
        $('.condition-change').change(function () {
            if($('select[name="SearchCondition"]').find('option[value="<>"]').is(":checked"))
            {
                $('.second-value').css("display", "block");
            }
            else
            {
                $('.second-value').css("display", "none");
            }

        });

      });