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

使用.ct_opt，因为它是一个类，并在选择更改时执行代码：

$(document).ready(function(){
    $("select.state_select").change(function(){
       if ($(this).val() == "CT") 
          $(".ct_opt").show();
       else $(".ct_opt").hide();
    });
    $("select.state_select").change(); //call change event when page loads
});

您可以使用$（），因为它等同于文档就绪：

$(function(){
    $("select.state_select").change(function(){
       if ($(this).val() == "CT") 
          $(".ct_opt").show();
       else $(".ct_opt").hide();
    });
    $("select.state_select").change(); //call change event when page loads
});

Answer 2

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

$('select.state_select')将选择类state_select的选择对象的数组。如果您只有一个state_select，则应将此选择器更改为$('#state_select')。使用$('select#state_select')（虽然有效）没有意义，因为每页只能有一个id。您可以使用当前的选择器，但您需要调用.first()来获取与该选择器匹配的元素数组中的第一项。

此外，Ragnar指出，没有名为＆＃39; ct_opt＆＃39;因此您需要将选择器更改为$（＆＃39; .ct_opt＆＃39;）以定位该类。

使用jquery if语句检测选择值

3 个答案: