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

Answer 2

您可以将name属性添加到输入元素

<select id="my_id">
    <option>foo</option>
    <option>bear</option>
</select>

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

然后你可以对元素数组进行迭代，并将所选的选项值与输入的父名称属性进行比较，如下所示：

$(document).ready(function(){
    $('#my_id').change(function() {
        $this = $(this);
        $('#display_bt1, #display_bt2').each(function() {
            $(this).hide();
            if($this.val() == $(this).children().attr('name')) $(this).show();
        });
    });
});

这可能不是最好的方法，但我尝试不要过多地修改HTML并使代码更具普遍性。

jsFiddle code

使用jquery隐藏和显示下拉列表中选项更改的按钮

2 个答案: