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 には、次のようなプログレッシブ名の 3 つの異なる配列があります。

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

ここで、最初の選択の選択されたオプションに従って、次のように、配列の 1 つ内の値を使用して 2 番目の選択を設定します。

$('#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 に答える