javascript - jQuery 显示/隐藏使用选择

Question

我正在尝试将显示/隐藏 jQuery 函数应用于 html 下拉框。当从下拉列表中选择一个选项时，我希望能够隐藏一个选项并显示另一个选项。此 jQuery 适用于普通按钮，但不适用于下拉菜单。

<select style="margin-left:30px;">
    <option value="" selected="selected">Please select a region</option>
    <option id="uk_btn" value="1">UK</option>
    <option id="usa_btn" value="2">USA</option>
</select>

<script>
    $("#usa_btn").click(function(){
      $("#usa_tbl").show();
      $("#uk_tbl").hide();
    });
</script>
<script>
    $("#uk_btn").click(function(){
      $("#uk_tbl").show();
      $("#usa_tbl").hide();
    });
</script>

Answer 1

您需要将选择框的事件放在

$('select').change(function(){
     var val = $(this + 'option:selected').attr('id');
     if(val == 'uk_btn') {
          $("#usa_tbl").hide();
          $("#uk_tbl").show();
     } elseif(val == 'usa_btn') {
          $("#uk_tbl").hide();
          $("#usa_tbl").show();
     }
});

您还可以使用复选框的值进行检查

var val = $(this).val();
if(val == '1') {
     $("#usa_tbl").hide();
     $("#uk_tbl").show();
} elseif (val == '2') {
     $("#uk_tbl").hide();
     $("#usa_tbl").show();
}