0

私は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オプションが選択されても何も表示されません。

4

2 に答える 2

1 
$('#menu').change(function () {
    optName = $('#menu').val();
    $("myArea#" + optName).show().siblings().hide();
});
于 2013-01-12T23:42:32.543 に答える
0 
$("myArea").("#" + optName).show();

何もしません。

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

しかし、あなたのために働くかもしれません。

于 2013-01-12T23:41:11.573 に答える