javascript - 比较数组和填充下拉列表的值

Question

我有两个数组

  array1[1;2;3;] 
  array2[1;1;1;1;2;2;3;3;]

我在下拉菜单中填充了第一个数组。现在我需要检查第二个数组中是否是具有相同值“1;”的元素 并在选择使用具有相同值的 array2 元素填充 dropdown2 。我只需要代码示例。

Answer 1

我创建了一个可以帮助您实现目标的 jsFiddle：http: //jsfiddle.net/XTdrr/

初始 HTML：

<select id="select1" onChange="populateSelect2()">
    <option value="">Choose...</option>
</select>
<br/>
<select id="select2"></select>

初始 JavaScript 变量

var array1 = [1, 2, 3];
var array2 = [1, 1, 1, 1, 2, 2, 3, 3];

var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");

首先，它使用 array1 中的值填充第一个下拉列表。

window.onload = function () {

    // here we populate select1 with the elements in array1

    for (var i = 0; i < array1.length; i++) 
    {
        var opt = document.createElement('option');
        opt.value = array1[i];
        opt.innerHTML = array1[i];
        select1.appendChild(opt);
    }
}

当在第一个下拉列表中选择某些内容时，它会在 array2 中查找匹配的元素并用这些填充第二个下拉列表。

function populateSelect2() 
{
    // first, empty select2

    for (var i = select2.options.length - 1; i >= 0; i--) 
    {
        select2.remove(i);
    }

    // then add new items
    // based on the selected value from select1 and matches from array2

    for (var i = 0; i < array2.length; i++) 
    {
        if (array2[i] == select1.value) 
        {
            var opt = document.createElement('option');
            opt.value = array2[i];
            opt.innerHTML = array2[i];
            select2.appendChild(opt);
        }
    }
}