为 $.each 循环内的数组变量名称附加后缀

Question

这是我的简单标记：

<select id="firstSelect">
 <option value="1">one</option>
 <option value="2">two</option>
 <option value="3">three</option>
</select>
<select id="secondSelect"></select>

在我的 js 中，有三个不同的数组，名称是渐进式的，如下所示：

var arrayColours1 = new Array('yellow', 'blue');
var arrayColours2 = new Array('red', 'grey');
var arrayColours3 = new Array('white', 'black');

现在我想根据第一个选择的选定选项，用数组中的一个值填充第二个选择，这样：

$('#firstSelect').change(function(){
var selectedValue = $(this).children('option:selected').val();
var elem = 'arrayColours'+ selectedValue;
$.each(elem, function (index, value) {
        $('<option/>').val(value).html(value).appendTo('#secondSelect');
    });
});

但这不起作用，因为elem 现在是一个字符串。 如何解决这个问题，将“arrayColours”与后缀连接起来，并使其成为调用数组名称的变量？ 非常感谢您的关注，任何帮助将不胜感激。

Answer 1

这比你想象的要容易。

var colourArray = {
   set1: ["yellow", "blue"],
   set2: ["red", "gray"],
   set3: ["white", "black"]
};

当您需要一组具体的颜色时，只需这样做：

clourArray["set" + selectedValue]

关联数组是您的理想之选！

Answer 2

如果你的变量传递到一个数组中会更好。

var arrayColours = [
  ['yellow', 'blue'],
  ['red', 'grey'],
  ['white', 'black']
];

$('#firstSelect').change(function(){
 var selected = this.value;
 $.each(arrayColours[selected-1], function(index, value) {
    $('<option/>').val(value).html(value).appendTo('#secondSelect');
 });
});

或者，您也可以使用如下对象：

var arrayColours = {
  one: ['yellow', 'blue'],
  two: ['red', 'grey'],
  three: ['white', 'black']
};

然后

   $('#firstSelect').change(function(){
     var selected = $('option:selected', this).text();
     $.each(arrayColours.selected, function(index, value) {
        $('<option/>').val(value).html(value).appendTo('#secondSelect');
     });
    });