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

时间:2013-08-20 09:09:54

标签: javascript arrays compare

我有两个数组

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

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

1 个答案:

答案 0 :(得分: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);
        }
    }
}