使用 jquery 根据选择值项更改 css

Question

小提琴

我有一个jQuery，如果所选值为"<>"（介于）之间，我想将样式更改为显示：块到输入框..但是这里所有选定的项目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

错误条件

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

Answer 2

你只需要访问你可以使用 val（） 获得的选定选项值，所以把条件放在 val（），

现场演示

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

还使用显示和隐藏而不是设置 css。

现场演示

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

Answer 3

尝试，

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

演示

或

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

演示 I

Answer 4

//添加 .is（"：checked"） 函数以检查是否选择了"<>"值选项

 $(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");
            }
        });
      });