0

这是我的简单标记：

<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”与后缀连接起来，并使其成为调用数组名称的变量？非常感谢您的关注，任何帮助将不胜感激。

4

2 回答 2

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');
     });
    });
于 2012-06-03T16:16:20.510 回答
1

这比你想象的要容易。

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

当您需要一组具体的颜色时，只需执行以下操作：

clourArray["set" + selectedValue]

关联数组是您的必经之路！

于 2012-06-03T16:18:28.153 回答