Javascript多个相关下拉列表_Javascript_Javascript Events

Javascript多个相关下拉列表

javascript

Javascript多个相关下拉列表,javascript,javascript-events,Javascript,Javascript Events,我是javascript新手，我正在努力处理以下代码，这些代码将以一种形式出现，用于注册多个候选代码它为每个候选人创建2个从属选择框（国家和地区）单击一次“添加候选人”按钮可使从属框正常工作，但再次单击该按钮将停止工作。当存在多个候选值时，也不可能从表单中访问所选值，因为它们将相互覆盖我曾经尝试过使用count变量创建select names作为数组，每次调用ff函数时我都会增加这个变量，但我无法让它工作所有的帮助将不胜感激 <html> <head> <s

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

它为每个候选人创建2个从属选择框（国家和地区）

单击一次“添加候选人”按钮可使从属框正常工作，但再次单击该按钮将停止工作。当存在多个候选值时，也不可能从表单中访问所选值，因为它们将相互覆盖

我曾经尝试过使用count变量创建select names作为数组，每次调用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>


选择填充测试
var UnitedStates=新数组（）；
美国[0]=“德克萨斯州”；
美国[1]=“加利福尼亚州”；
美国[2]=“亚利桑那州”；
美国[3]=“内华达州”；
美国[4]=“佛罗里达州”；
var UnitedKingdom=新数组（）；
英国[0]=“萨里”；
英国[1]=“肯特”；
联合王国[2]=“多塞特”；
英国[3]=“汉普郡”；
函数填充下拉列表（arry）
{
document.myForm.stateSelect.options.length=0；
对于（变量i=0；i”+计数器+”.Candidate Country”；
box.appendChild（cselectBox）；
var box2=document.getElementById（“detailsx”+计数器）；
var ccselectBox=document.createElement（“选择”）；
ccselectBox.name=“stateSelect”；
document.getElementById（“detailsx”+计数器）.innerHTML+=“”+计数器+“.Candidate City”；
框2.appendChild（ccselectBox）；
}
这里有很多问题。我们先解决你要处理的问题
当您使用相同的名称命名多个控件（如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]);
    }
}

函数填充下拉列表（arry）
{
var stateSelect=document.getElementById（'stateSelect'+计数器）；
stateSelect.options.length=0；
对于（变量i=0；i

我曾经验证过这些更改
您还需要在每个国家/地区下拉列表中添加一个事件，以便在国家/地区下拉列表发生更改时重新填充该下拉列表，而结构需要为此做一些工作。如果您不反对框架，击倒将使其运行起来非常简单
一切正常，并在关键更改处添加注释
更新：添加了小提琴的链接
谢谢，但我还是无法让它工作。如果你以后能发布完整的代码，那将是一个很大的帮助！目前，在我开始使用框架之前，我正在尝试直接使用Javascript，看看答案后面的提琴。当我将其余部分添加到fiddle中时，我会通知您，或者您可以使用它来测试代码。这是测试客户端代码的最快方法。现在我有了一个指向完全工作的实现的链接。为了让它工作，我不得不改变一些事情，并添加了相应的评论。如果你还有问题，请告诉我。谢谢，这太好了！