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 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');
     });
    });

Answer 2

这比你想象的容易。

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

如果您需要一组具体的颜色，请执行以下操作：

clourArray["set" + selectedValue]

关联数组是您的最佳选择！

在$ .each循环内的数组变量名后附加一个后缀

2 个答案: