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

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

<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 ="" > 

--挑选--
福
熊

$（文档）.ready（函数（）{
$（'my#u id'）。更改（函数（）{
if（$（this）.val（）=='foo'）{
$（'#display_bt2'）.show（）；
}else if（$（this）.val（）=='bear'）{
$（'#display_bt1'）.show（）；
}否则{
}
});
});

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

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

如果要在

更改中隐藏另一个div

，请在每个div中添加一个类，例如

divClass

，然后在每次更改中隐藏该类（当然，如果需要此功能）

---

您可以向输入元素添加

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>

这可能不是最好的方法，但我尽量不修改HTML太多，使代码更通用

---

在

$（“#display_bt2”）上缺少一个“on”

是的，不确定您是在寻找值“bear”还是“bar”，但假设后者，这意味着拼写不正确。关闭[所有]输入错误。显示所选标记将澄清这些值。感谢tymeJV的回复。对不起，我不明白你所说的向每个div添加类是什么意思。你建议围绕一个div类吗？这个.value根本不起作用，就像我以前的$（this）对我起作用一样。介意为你的选择列表发布你的HTML标记吗？我可以给你一个更好的答案。给你：——选择——福熊

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

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