Javascript 使用jqueryif语句检测select值

Javascript 使用jqueryif语句检测select值,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图利用jqueryif语句创建一个表单,允许员工为他们的客户创建自定义的口头脚本。基本上,JQuery插件只需将输入字段值附加到一个对话中,由员工向客户读取 我对将文本字段和选择框的内容附加到对话框中的JS没有异议,但似乎无法找出最关键的部分。我希望能够根据选择框输入字段的值显示或隐藏与特定状态相关的信息 下面是我试图利用if/else语句来实现此目的的一个示例 HTML: JQuery: $(document).ready(function(){ if ($("select.state_s

我试图利用jqueryif语句创建一个表单,允许员工为他们的客户创建自定义的口头脚本。基本上,JQuery插件只需将输入字段值附加到一个对话中,由员工向客户读取

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

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

HTML:

JQuery:

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

} else {

    if ($("select.state_select").val() != "CT")
        $("ct_opt").hide();
    }
});
据我所知,这应该允许目标文本保持隐藏,除非其相应的状态被选中。然而,目前它似乎什么也没做:

如有任何建议,将不胜感激

使用.ct\u 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
});
您可以使用$,因为它相当于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
}); 
$document.readyfunction{ $'。state_select'.val'CT'; $'.state_select'.on'change',函数{ console.log'click'; 如果$this.val=='CT'{ $'.ct_opt'.show; } 如果$this.val=='noshow'{ $'.ct_opt'.hide; } }; }; 康涅狄格州 不显示

Lorem Ipsum

$'select.state\u select'将使用类state\u select选择一组select对象。如果只有一个状态选择,则应将此选择器更改为$'state\u select'。尽管$selectstate\u select有效,但使用它没有意义,因为每页只能有一个id。您可以使用当前选择器,但需要调用.first以获取与该选择器匹配的元素数组中的第一项


此外,正如Ragnar指出的,没有名为“ct_-opt”的元素,因此您需要将选择器更改为$'.ct_-opt'以针对类。

您不需要else块中的if条件。。。
$(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
});