Javascript多个依赖下拉菜单

问题描述：

我是JavaScript新手，我正在努力处理下面的代码，这些代码将在多个候选人的注册表单中使用。Javascript多个依赖下拉菜单

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

单击“添加候选人”按钮一次，允许依赖框正常工作，但再次单击该按钮会停止工作。当有多个候选人时，从表格中选择所选的值也是不可能的，因为他们会相互覆盖。

我已经尝试创建选择名称作为数组使用计数变量，我每增加一次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()检索该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与键添加一切工作正常和评论改变

更新：新增链接到小提琴（S）

感谢这个，但是我仍然无法得到它的工作。如果您以后可以发布完整的代码，这将非常有帮助！目前，我只是想在使用框架之前直接使用JavaScript。 – user2735652

看到我附加到答案的小提琴。当我将其余部分添加到小提琴时，我会让你知道，或者你可以用它来测试你的代码。这是测试客户端代码的最快方法。 – Lathejockey81

现在我有一个完整工作实现的链接。我不得不改变几件事情才能使它工作，我相应地添加了评论。如果您有任何问题，请告诉我。 – Lathejockey81

Javascript多个依赖下拉菜单

相关推荐