javascript - 使用 jquery 隐藏和显示下拉菜单中选项更改的按钮

Question

我试图在从下拉列表中选择不同字段时显示不同的按钮。这是我的代码，它仅适用于下拉列表中的第一项。请建议我的代码有什么问题:

<select id="my_id">
  <option value="select">--Select--</option>
  <option value="foo">foo</option>
  <option value="bear">bear</option>
</select>

<div id="display_bt1" style="display:none;">
  <input type="button" value="bt1" onclick ="" > 
</div>
<div id="display_bt2" style="display:none;">
  <input type="button" value="bt2" onclick ="" > 

<script>
$(document).ready(function(){
$('#my_id').change(function() {
      if ($(this).val() == 'foo') {
         $('#display_bt2').show();
      } else if ($(this).val() == 'bear'){
         $('#display_bt1').show();
      } else {

      }
    });
});
</script>

Answer 1

一些语法错误，除此之外，它应该可以工作:

$('#my_id').change(function() {
    if (this.value == 'foo') {
        $('#display_bt2').show();
    } else if (this.value == 'bear') {
        $('#display_bt1').show();
    }
});

如果您想在change上隐藏其他div，请为每个div添加一个类，例如divClass，然后在每次更改时隐藏该类(当然这是如果您想要此功能的话)。

$('#my_id').change(function() {
    $(".divClass").hide();
    if (this.value == 'foo') {
        $('#display_bt2').show();
    } else if (this.value == 'bear') {
        $('#display_bt1').show();
    }
});