0

我试图在从下拉列表中选择不同的字段时显示不同的按钮。这是我的代码，它仅对下拉列表中的第一项有效。请告知我的代码有什么问题：

<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>
4

2 回答 2

2

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

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

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

$('#my_id').change(function() {
    $(".divClass").hide();
    if (this.value == 'foo') {
        $('#display_bt2').show();
    } else if (this.value == 'bear') {
        $('#display_bt1').show();
    }
});
于 2013-06-10T18:27:33.697 回答
0

您可以将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 代码

于 2013-06-10T19:03:06.533 回答