Question

I am using jQuery and what I am trying to do is have an onChange event fire whenever a dropdown SELECT option is chosen that will display an element based on the value of the option selected. The difficult part is that I also want any element displayed to disappear when a new option is chosen so that the chosen element is the only one showing. I am very close but can’t understand why what I am trying is not working.

So far what I have is this:

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

So far, what WORKS is that if I don’t add the style="display:none" to the <myArea> elements, I can get every element except the chosen one to hide. However, when I change the option again, the already displayed element disappears but the chosen element does not show. If I use style="display:none" on the myArea elements it will not display anything when any option is selected.

Answer 1

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