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

目前，您正在按钮单击处理程序中绑定文档就绪处理程序，因为文档已经加载，select永远不会发生事件绑定。

使用

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

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

1 个答案: