Question

我是javascript的新手，我正在努力使用以下代码，这些代码将以多个候选人的注册形式出现。

为每个候选人创建2个相关的选择框（国家和地区）。

点击按钮＆＃39;添加候选人＆＃39;一旦允许从属框工作正常但再次单击该按钮会停止它的工作。当存在多个候选者时，从表单中访问所选值也是不可能的，因为它们将相互覆盖。

我尝试使用count变量创建选择名称作为数组，每次调用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>

Answer 1

这里有很多问题。我们将首先处理您正在处理的问题。

当您使用相同名称命名多个控件时，例如stateSelect，每次尝试引用它时，您将获得第一个控件。如果您将ID设置为'stateSelect' + counter，则会获得一个唯一ID，然后您可以使用document.getElementById()检索该ID。所以在填充下拉列表的函数中看起来像这样：

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]);
    }
}

here is the fiddle我曾经验证过这些变化。

您还需要在每个国家/地区下拉列表中添加一个事件，以便在更改时重新填充状态下拉列表，并且该结构需要一些工作。如果你不反对框架，那么淘汰将使这个非常简单。

Here is the fiddle一切正常，并在主要更改时添加了评论

更新：添加了小提琴的链接

Javascript多个相关下拉列表

1 个答案: