0

私はJavaScriptが初めてで、複数の候補者を登録するためのフォームになる次のコードに苦労しています。

候補ごとに 2 つの依存選択ボックス (国と地域) が作成されます。

[候補を追加] ボタンを 1 回クリックすると、依存ボックスが正常に機能しますが、もう一度ボタンをクリックすると機能しなくなります。複数の候補がある場合、フォームから選択した値にアクセスすることも、互いに上書きされるため不可能です。

ff 関数が呼び出されるたびに増加するカウント変数を使用して、選択名を配列として作成しようとしましたが、機能しません。

すべての助けに感謝します！

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<title>Select Populate Test</title>

<script>
var UnitedStates = new Array();
UnitedStates[0] = "Texas";
UnitedStates[1] = "California";
UnitedStates[2] = "Arizona";
UnitedStates[3] = "Nevada";
UnitedStates[4] = "Florida";

var UnitedKingdom = new Array();
UnitedKingdom[0] = "Surrey";
UnitedKingdom[1] = "Kent";
UnitedKingdom[2] = "Dorset";
UnitedKingdom[3] = "Hampshire";

function populateDropdown(arry)
{
    document.myForm.stateSelect.options.length = 0;

    for (var i = 0; i < arry.length; i++)
    {
        document.myForm.stateSelect.options[i] = new Option(arry[i], arry[i]);
    }
}

function updateDropdown(str)
{
    var stateArray
    var selectedCountry;
    var countryDropdown = document.myForm.countrySelect;

    for (var i = 0; i < countryDropdown.options.length; i++)
    {
        if (countryDropdown.options[i].selected)
        {
            selectedCountry = countryDropdown.options[i].value;
        }
    }

    if (selectedCountry == 1)
    {
        stateArray = UnitedStates;
        populateDropdown(stateArray);
    }

    if (selectedCountry == 2)
    {
            stateArray = UnitedKingdom;
        populateDropdown(stateArray);
    }
}

counter = 0;
function ff()
{
        counter++;
        var box = document.getElementById("details"+counter);

        var cselectBox = document.createElement("Select");
        cselectBox.name="countrySelect";
        cselectBox.onchange = function()
        {
            updateDropdown();
        }

        var option1 = document.createElement("OPTION"); 
        option1.text="United States";  
        option1.value=1;  
        cselectBox.options.add(option1);

        var option2 = document.createElement("OPTION"); 
        option2.text="United Kingdom";  
        option2.value=2;  
        cselectBox.options.add(option2);

        document.getElementById("details"+counter).innerHTML+="</p><p>"+counter+". Candidate Country";
        box.appendChild(cselectBox);

        var box2 = document.getElementById("detailsx"+counter);

        var ccselectBox = document.createElement("Select");
        ccselectBox.name="stateSelect";
        document.getElementById("detailsx"+counter).innerHTML+="</p><p>"+counter+". Candidate City";
        box2.appendChild(ccselectBox);
}

</script>
</head>

<body>
<form name="myForm" >
<input type="button" value="Add Candidate" onClick="ff(); populateDropdown(UnitedStates);"">
<!--- Note: 6 Candidates will be the maximum. -->
<div id="details1"><b></b></div>
<div id="detailsx1"><b></b></div>
<div id="details2"><b></b></div>
<div id="detailsx2"><b></b></div>
<div id="details3"><b></b></div>
<div id="detailsx3"><b></b></div>
<div id="details4"><b></b></div>
<div id="detailsx4"><b></b></div>
<div id="details5"><b></b></div>
<div id="detailsx5"><b></b></div>
<div id="details6"><b></b></div>
<div id="detailsx6"><b></b></div>
</form>
</body>
</html>
4

1 に答える 1

0

ここには複数の問題があります。まずはお悩みの方に対応いたします。

stateSelect のように複数のコントロールに同じ名前を付けると、参照しようとするたびに最初のコントロールが取得されます。代わりに id を に設定すると'stateSelect' + counter、一意の id が取得され、 で取得できますdocument.getElementById()。したがって、ドロップダウンを設定する関数は次のようになります。

function populateDropdown(arry)
{
    var stateSelect = document.getElementById('stateSelect'+counter);
    stateSelect.options.length = 0;

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

これらの変更を確認するために使用したフィドルを次に示します。

また、国のドロップダウンが変更されたときに州のドロップダウンを再設定するために、各国のドロップダウンにイベントを追加する必要があります。そのためには、構造に多少の作業が必要です。フレームワークに反対していなければ、ノックアウトを使用すると、これを非常に簡単に実行できます。

これは、すべてが正しく機能し、重要な変更にコメントが追加されたフィドルです

更新: フィドルへのリンクを追加しました

于 2013-08-31T15:10:11.567 に答える