3

2番目のドロップダウンが2番目のドロップダウンに表示される2層のドロップダウンメニューを作成しようとしています。サイトでたくさんの例を見つけましたが、2番目のメニューが選択された後、メニューをページにリダイレクトしたいのですが、それがわかりません。

私はJSに精通していませんので、ご容赦ください。

以下のコードは、別の投稿の例です。

<script type="text/javascript">
function configureDropDownLists(ddl1,ddl2) {
    var colours = new Array('Black', 'White', 'Blue');
    var shapes = new Array('Square', 'Circle', 'Triangle');
    var names = new Array('John', 'David', 'Sarah');

    switch (ddl1.value) {
        case 'Colours':
            document.getElementById(ddl2).options.length = 0;
            for (i = 0; i < colours.length; i++) {
                createOption(document.getElementById(ddl2), colours[i], colours[i]);
            }
            break;
        case 'Shapes':
            document.getElementById(ddl2).options.length = 0; 
        for (i = 0; i < colours.length; i++) {
            createOption(document.getElementById(ddl2), shapes[i], shapes[i]);
            }
            break;
        case 'Names':
            document.getElementById(ddl2).options.length = 0;
            for (i = 0; i < colours.length; i++) {
                createOption(document.getElementById(ddl2), names[i], names[i]);
            }
            break;
            default:
                document.getElementById(ddl2).options.length = 0;
            break;
    }

}

function createOption(ddl, text, value) {
    var opt = document.createElement('option');
    opt.value = value;
    opt.text = text;
    ddl.options.add(opt);
}

それからそれを呼ぶ

<select id="ddl" onchange="configureDropDownLists(this,'ddl2')">
<option value=""></option>
<option value="Colours">Colours</option>
<option value="Shapes">Shapes</option>
<option value="Names">Names</option>
</select>
<select id="ddl2">
</select>

これはすべて正常に機能しますが、2番目のドロップダウンでユーザーが選択した後、ページをサイトのどこかにリダイレクトする必要があります。

誰かがそれを実現するためにコードを適応させる方法を手伝ってもらえますか？

ありがとうございました

4

1 に答える 1

0

人が 2 番目のドロップダウンで選択した後、ページをサイトのどこかにリダイレクトしたい。

change2 番目の要素のイベントをフックし、<select>そこからフォームを送信します。

<select id="ddl2" onChange="redirect(this)">
</select>

function redirect(select) {
    // The simplest way: call submit on the form element the select belongs to:
    select.form.submit();
}

ただし、送信する前にフォームのターゲット属性を動的に変更したり、別の場所に移動したりすることもできます。

name更新:送信を機能させるには、もちろん、次のようないくつかの属性を選択に与える必要があります。

<form action="/router.php" method="GET">
    <select name="first" onchange="configureDropDownLists(this,'ddl2')">
        ...
    </select>
    <select name="second" id="ddl2" onChange="redirect(this)">
    </select>
</form>

configureDropDownLists関数は機能するかもしれませんが、switch ステートメントを使用せずにオブジェクト リテラルを使用することで改善できます。オブジェクト内にオプション値が見つかった場合は、同じことを実行する前にオプション値の配列を選択するだけです。

function configureDropDownLists(firstSelect, secondId) {
    var map = {
        "colours": ['Black', 'White', 'Blue'],
        "shapes": ['Square', 'Circle', 'Triangle'],
        "names": ['John', 'David', 'Sarah']
    };

    var value = firstSelect.value.toLowerCase();
    var optionsArr = map[value];

    var secondSelect = document.getElementById(secondId);
    secondSelect.options.length = 0; // remove all options
    if (optionsArr) {
         for (var i=0; i<optionsArr.length; i++) {
              createOption(secondSelect, optionsArr[i], optionsArr[i]);
         }
    }
}
于 2012-08-05T15:32:19.430 に答える