javascript - 如何根据下拉列表中选择的选项隐藏/显示文本字段？

Question

我试图根据下拉列表中选择的内容隐藏/显示某些字段。我有以下代码。

$("#button").click(function() {
    alert("handler called");
    $("#name").hide();
    $(document).ready(function(){
    $("#selection").on('change', function() {
        alert("handler called1");
        if ($("#selection").val() == "day")
        {
            $("#name").show();
        }

      });
});
});

我的 HTML 是

<div class="selection" id = "selection">
   <tbody><td><label>selection</label></td>
<td><select class="selection"></select></td>
   </tbody>            
</div>

<div class="name" id = "name">
<tbody><td><label>Name</label></td><td><input type="text" </input></td>
</tbody>
</div>

alert("handler called")

工作正常。还有

$("#name").hide(); 

也有效。但第二部分中基于实际选择的隐藏/显示不起作用。我想我无法捕获下拉菜单中所做的选择。请指教。

Answer 1

目前，您正在按钮单击处理程序中绑定(bind)文档就绪处理程序，并且由于文档已加载，select 永远不会发生事件绑定(bind)。 。

使用

$(document).ready(function() {
    $("#button").click(function() {
        alert("handler called");
        $("#name").hide();
    });
    $(".selection").on('change', function() {
        alert("handler called1");
        if ($(this).val() == "day") {
            $("#name").show();
        }
    });
});

您还需要使用Class Selector (".class") 因为您正在使用 <select class="selection"></select>