如何根據下拉菜單中選擇的選項隱藏/顯示文本字段？

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

另外，由於您正在使用<select class="selection"></select>還需要使用類選擇器(".class") 。