1

3つのアイテムを含むドロップダウンのあるページがあります:

<select name="orderOption" id="orderOption">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option> 
</select>

現在、その選択に基づいて、適切なクラスで div を表示または非表示にする Javascript があります。 

function orderOptionChanged() {
        var e = document.getElementById("orderOption");
        var orderOption = e.options[e.selectedIndex].value;

        if (orderOption == "1") {
            $('.OrderOption1').show();
            $('.OrderOption2,.OrderOption3,').hide();
        }

これは 3 つだけで問題なく動作しますが、現在は 25 個が必要です。すべてを書き出すことなく、1 つのオプションのみを選択する方法が必要です。私はこれまで Javascript を扱ったことがなかったので、これは私にとってまったく新しいことです。

4

4 に答える 4

5 
var orderOption = e.options[e.selectedIndex].value;
$('*[class^="OrderOption"]').hide();
$('.OrderOption'+orderOption).show();

.hide()現在のメソッドはすべての要素を調べてそれらのクラスをチェックする必要があるため、それらすべてに基本クラスを割り当て、それを使用して を呼び出すこともできます。

class^="OrderOption"- この行は、「OrderOption で始まる」クラスを持つすべての要素を選択します。

'.OrderOption'+orderOption- 次に、上記の値を別のセレクターに追加して、適切なOrderOption.

于 2012-08-09T21:02:41.787 に答える
0

対応するオプションと同じ順序で表示されるようにdivを並べ替えます。それらすべてに同じクラスを与えます。それらをすべて非表示にしてから、選択したオプションに対応するものを表示します。

$("#orderOption").change(function () {
    $(".orderOption").hide().eq(this.selectedIndex).show();
});

作業デモ： http： //jsfiddle.net/mXc93/

于 2012-08-09T21:07:07.380 に答える
0

これを試して

function orderOptionChanged() {
        var e = document.getElementById("orderOption");
        var orderOption = e.options[e.selectedIndex].value;    
        $('#orderOption option').hide();
        $('.OrderOption'+orderOption).show();
}
于 2012-08-09T21:04:46.287 に答える
0 
function orderOptionChanged() {
    var e = $("#orderOption");
    var orderOption = e.val();
    var option = $('.OrderOption'+orderOption);

    option.show();
    $('[class^=OrderOption]').not(option).hide();
}
于 2012-08-09T21:08:35.977 に答える