Question

我正在使用jQuery，我想要做的是每当选择下拉SELECT选项时将触发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>

到目前为止，如果我不将style="display:none"添加到<myArea>元素，我可以获得除了所选元素之外的所有元素以隐藏。但是，当我再次更改选项时，已显示的元素将消失，但所选元素不会显示。如果我在style="display:none"元素上使用myArea，则在选择任何选项时，它将不会显示任何内容。

Answer 1

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

Answer 2

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

什么也没做。

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

然而，

可能适合你。

无法显示一个元素并根据SELECT选项隐藏其他元素

2 个答案: