Javascript 基于选择选项显示一个元素和隐藏其他元素时出现问题

我使用的是jQuery，我尝试的是在选择下拉选择选项时触发onChange事件，该选项将根据所选选项的值显示元素。困难的部分是，我还希望在选择新选项时显示的任何元素都消失，以便所选元素是唯一显示的元素。我非常接近，但不明白为什么我所尝试的不起作用

到目前为止，我得到的是：

//Dropdown
<select id="menu">
<option val="show1">Show First</option>
<option val="show2">Show Second</option>
...
<option val="show255">Show 255th</option>
</select>

//Invisible areas
<myArea id="show1" style="display:none">
Stuff1
</myArea>

<myArea id="show2" style="display:none">
Stuff2
</myArea>

...

<myArea id="show255" style="display:none">
Stuff255
</myArea>


//JavaScript
<script>
$('#menu').change(function () {
    optName = $('#menu').val();
    $("myArea").not("#" + optName).hide();
    $("myArea").("#" + optName).show();
});
</script>

//下拉列表
先展示
第二场
...
第255场
//不可见区域
材料1
材料2
...
填充255
//JavaScript
$（'#菜单'）。更改（函数（）{
optName=$（“#菜单”）.val（）；
$（“myArea”）.not（“#”+optName.hide（）；
$（“myArea”）。（“#”+optName）.show（）；
});

到目前为止，如果我不将

style=“display:none”

添加到

元素中，我可以得到除所选元素之外的所有元素来隐藏。但是，当我再次更改该选项时，已显示的元素将消失，但所选元素不会显示。如果我在

myArea

元素上使用

style=“display:none”

，则当选择任何选项时，它将不会显示任何内容

$("myArea").("#" + optName).show();

什么也不做

$('[id='+optName+']').show();

---

但是可能对您有用。

为什么要使用

[id=X]

#X

将更快，因为它可以使用本机选择器。它也更简单、更短。请记住，

show（）

和

hide（）

方法不适用于IEAwesome中的“选项”标记！非常感谢。看来在JS中引用东西的方法有很多。。。

$('#menu').change(function () {
    optName = $('#menu').val();
    $("myArea#" + optName).show().siblings().hide();
});