javascript - 使用 jquery if 语句检测选择值

Question

我正在尝试利用 JQuery if 语句创建一个表单，该表单将允许员工为其客户创建自定义口头脚本。基本上，JQuery 插件将简单地将输入字段值附加到对话中，以供员工向客户朗读。

我对为将文本字段和选择框的内容附加到对话而编写的 JS 没有任何问题，但似乎无法找出最关键的部分。我希望能够根据选择框输入字段的值显示或隐藏与特定状态相关的信息。

下面是我尝试使用 if/else 语句来实现此目的的一个示例。

HTML:

<select name="state_select" class="state_select">
       <option value="CT">Connecticut</option>
</select>

<p class="ct_opt">Lorem Ipsum</p>

CSS:

.ct_opt {
    display:none;
}

JQuery:

$(document).ready(function(){
if ($("select.state_select").val() == "CT") {
    $("ct_opt").show();

} else {

    if ($("select.state_select").val() != "CT")
        $("ct_opt").hide();
    }
});

据我了解，这应该允许目标文本保持隐藏状态，除非选择了相应的状态。但是，目前它似乎什么也没做:(

如有任何建议，我们将不胜感激。

Answer 1

$(document).ready(function() {
    $('.state_select').val('CT');
    $('.state_select').on('change', function() {
        console.log('click');
        if($(this).val() == 'CT') {
            $('.ct_opt').show();
        }
        else if ($(this).val() == 'noshow') {
            $('.ct_opt').hide();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="state_select" class="state_select">
    <option value="CT">Connecticut</option>
    <option value="noshow">Dont Show</option>
</select>

<p class="ct_opt">Lorem Ipsum</p>