jQuery hide / show元素依赖于html选择值

Question

我确信这是微不足道的，即便如此，我还有一个问题就是通过jQuery depand隐藏/显示元素在html表单上的选定值。我有这个HTML：

HTML

<select name="town" id="town" onchange="otherTown()">
    <option value="1">New York</option>
    <option value="2">Washington</option>
    <option value="3">London</option>
    <option value="4">Other</option>
</select>

<div id="alt_town" style="display:none;">
    <label for="right-label" class="right inline">Other Town</label>
    <input type="text" id="right-label" name="alt_town">
</div>

JS

function otherTown() {
    $('#town').on('change', function () {
        if ($(this).val() === "4") {
            $("#alt_town").show()
        } else {
            $("#alt_town").hide()
        }
    });
}

当用户在选择中选择“其他”选项时，会出现“其他城镇”表格。它工作，但只有在我选择“其他”选项之前的其他东西后（例如“伦敦”选项）。即使“其他”是首选，我也需要元素展示。

谢谢你们的帮助。

Answer 1

问题是你的内联事件处理程序，你只是在内联事件处理程序中注册jQuery更改处理程序（它正在切换显示），所以当第一次更改发生时，没有jQuery处理程序要执行，所以没有任何反应。

当触发第二个更改时，您在上一个事件中注册了处理程序，并且显示已更改，但是它将导致调用多个更改事件处理程序，因为每个更改都将添加一个新的jQuery事件处理程序< / p>

不需要内联处理程序

//dom ready handler
jQuery(function($) {
  $('#town').on('change', function() {
    //use toggle for ease of use
    $("#alt_town").toggle(this.value == 4)
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="town" id="town">
  <option value="1">New York</option>
  <option value="2">Washington</option>
  <option value="3">London</option>
  <option value="4">Other</option>
</select>

<div id="alt_town" style="display:none;">
  <label for="right-label" class="right inline">Other Town</label>
  <input type="text" id="right-label" name="alt_town">
</div>

Answer 2

使用jQuery绑定处理程序（因此删除onchange="otherTown()"）。然后使用jQuery toggle()方法：

$(function() { // shothand for document ready pseudo event, if needed
    $('#town').on('change', function () {
        $("#alt_town").toggle(this.value === "4");
    });
});

Answer 3

您可以使用：

$('#town').change(function () {
    if($(this).val()==parseInt("4"))
       {
       $('#alt_town').show();
       }else{
            $('#alt_town').hide();
       }
    });