jQuery使用select显示/隐藏

Question

我正在尝试将一个show/hide 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();
     }
});

您也可以value选中复选框

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