2

JAVASCRIPT を使用して、2 つの従属子ドロップダウン リストを持つ 1 つの親ドロップダウンを作成しようとしています。

私の html ページはhttp://www.larkgrove.com/entryform/entryform.htmlにあります。

Dynamic Options Lists / Dependent Selects を使用しています: http://www.javascripttoolbox.com/lib/dynamicoptionlist/examples.php

私のサイトをチェックアウトすると、子リストを何もない状態と「NULL」の間で変更できることがわかりますが、それが私にできるすべてです。

ありがとう！

4

2 に答える 2

1

あなたが動的オプション スクリプトを使用していることは知っていますが、ゼロからの簡単な解決策を考えてみました。コードは少し冗長ですが、この方法で何が起こっているかを簡単に確認できることを願っています。最終的な作業ページはこちら: http://ryanscook.com/Files/DropDownListTest.htm

このhtmlがあると仮定することから始めましょう：

<select id="parentList" onchange="parentList_OnChange(this)">
    <option>Choose an option</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>

<select id="childList1"></select>
<select id="childList2"></select>

onchange ハンドラーがあることに気付くでしょう。これが Java スクリプトです。

// Data for child list 1, this is a of the parent value to one or more options
var childList1Data = {
    "A": ["ChildList1 - A1", "ChildList1 - A2", "ChildList1 - A3"],
    "B": ["ChildList1 - B1"],
    "C": ["ChildList1 - C1", "ChildList1 - C2"],
    "D": ["ChildList1 - D1", "ChildList1 - D2"]
};


// Data for child list 2, this is a of the parent value to one or more options
var childList2Data = {
    "A": ["ChildList2 - A1", "ChildList2 - A2"],
    "B": ["ChildList2 - B1", "ChildList2 - B2", "ChildList2 - B3"],
    "C": ["ChildList2 - C1", "ChildList2 - C2"],
    "D": ["ChildList2 - D1"]
};


// onchange is called when the parent value is changed
function parentList_OnChange(objParentList) {
    var child1 = document.getElementById("childList1");
    var child2 = document.getElementById("childList2");

    // Remove all options from both child lists
    removeOptions(child1);
    removeOptions(child2);

    // Lookup and get the array of values for child list 1, using the parents selected value
    var child1Data = childList1Data[objParentList.options[objParentList.selectedIndex].value];

    // Add the options to child list 1
    if (child1Data) {
        for (var i = 0; i < child1Data.length; i++) {
            child1.options[i] = new Option(child1Data[i], child1Data[i]);
        }
    }


    // Do the same for the second list
    var child2Data = childList2Data[objParentList.options[objParentList.selectedIndex].value];

    if (child2Data) {
        for (var i = 0; i < child2Data.length; i++) {
            child2.options[i] = new Option(child2Data[i], child2Data[i]);
        }
    }
}


function removeOptions(objSelect) {
    while (objSelect.options.length > 0)
        objSelect.options[0] = null;
}

これが役に立ち、あなたの質問から遠く離れていなかったことを願っています。

于 2008-12-12T05:57:39.153 に答える
0

まず、コードを見てみましょう。

<script type="text/javascript">
var TESTLIST = new DynamicOptionList("PARENT1","CHILD1","CHILD2");
TESTLIST.forValue("A").forValue("A").forValue("A").addOptionsTextValue("C","C","D","D");
</script>
<select name="PARENT1">
    <option value="A">A</option>
    <option value="B">B</option>
</select>
<br /><br />
<select name="CHILD1"><script type="text/javascript">TESTLIST.printOptions("CHILD1")</script></select>
<br /><br />
<select name="CHILD2"><script type="text/javascript">TESTLIST.printOptions("CHILD2")</script></select>

特にこれは、あなたが意図していることをしているとは思いません：

TESTLIST.forValue("A").forValue("A").forValue("A").addOptionsTextValue("C","C","D","D");

.forvalue("A") を何度も冗長に呼び出す方法を参照してください。コード例を見ると、次のことがわかります。

regionState.forValue("west").addOptions("California","Washington","Oregon");

私はこのようなことをもっと試してみます：

TESTLIST.forValue("A").addOptionsTextValue("C","D");
TESTLIST.forValue("B").addOptionsTextValue("E","F");
于 2008-12-12T05:41:39.543 に答える