JavaScript多个依赖项下拉列表

我是JavaScript的新手，我正在努力处理以下代码，这些代码将以一种形式用于注册多个候选者。

它为每个候选人创建2个依亲选择框（国家和地区）。

单击一次"添加候选人"按钮可以使从属框正常工作，但再次单击按钮会停止工作。当有多个候选者时，也不可能访问表单中的选定值，因为它们会相互覆盖。

我曾尝试使用计数变量将select名称创建为数组，每次调用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>

这里有多个问题。我们会先处理你要处理的那个。

当你用相同的名称命名多个控件时，比如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]);
    }
}

这是我用来验证这些变化的小提琴。

您还需要在每个国家/地区的下拉列表中添加一个事件，以便在州下拉列表发生变化时重新填充该下拉列表，而结构需要为此做一些工作。如果你不反对框架，淘汰将使其运行起来非常简单。

这是一切正常工作的小提琴和关键变化添加的评论

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

相关内容

最新更新

热门标签：