使用带有多个选项的数组填充下拉列表选项

所以我试图用状态填充下拉列表，选项的值应该是两个字符的值，选项的文本应该是完整状态的名称，使用下面的代码返回值0,1 ，2,3 …并将var中的所有选项作为文本返回。

var states = ["Select State","","Alabama","AL","Alaska","AK","Arizona","AZ","Arkansas","AR",...]; $.each(states, function(val, text) { $('#selector').append( $(' ').val(val).html(text) ) }); 

Answer 1

试试这个，使用states而不是数组的对象。 相同的结果，但更清楚的是什么，如果您不小心跳过名称或缩写，您不太可能遇到问题：

 var states = { "Select State":"", "Alabama":"AL", "Alaska":"AK", "Arizona":"AZ", "Arkansas":"AR" }; var val, text; for (text in states) { val = states[text]; $('').val(val).text(text).appendTo($('#selector')); }; 

http://jsfiddle.net/g59U4/

Answer 2

问题是提供给.each的回调函数导致val包含当前迭代的索引（例如0,1,2等）和包含该数组索引值的text 。

为了达到你想要的目的，你可能会更好地使用正常的for循环：

 for(var i = 0; i < states.length; i+=2) { $("#selector").append($(' ').val(states[i+1]).html(states[i])); } 

在循环之外缓存包含#selector的jQuery对象会更好，所以它不必每次迭代都要查找它。

这是上面的一个工作示例 。

另一个选择是使用对象而不是数组，使用状态名称或缩写作为键，另一个选项作为值。 编辑：就像@ mblase75一样

Answer 3

好吧，你有jQuery.each函数参数混淆。 第一个是数组中值的索引，第二个是值本身的值。 你需要做的是：

 $.each(states, function(index) { if(index%2 > 0) { //continue, basically skip every other one. Although there is probably a better way to do this return true; } $('#selector').append( $(' ').val(states[index+1]).html(states[index]) ) }); 

Answer 4

如果您的数组有两个维度，那将非常简单。 考虑到你真的需要使用你呈现的一维数组，你可以这样做：

 var states = ["Select State","","Alabama","AL","Alaska","AK","Arizona","AZ","Arkansas","AR"]; for(var i=1; i' + states[i-1] + '').val(val).html(text) ) } 

Answer 5

如果您将数组更改为对象数组，则可以执行以下操作 –

 var states = [{"text":"Select State","val":""},{"text":"Alabama","val":"AL"}]; //etc $.each(states, function(val, statedata) { $('#selector').append( $(' ').val(statedata.val).html(statedata.text) ) }); 

此更改每次都会将JavaScript对象传递给回调。 该对象具有text和val属性，并作为statedata参数传递给回调。 val参数保存数组的当前索引位置，因此不需要填充选择框。

演示 – http://jsfiddle.net/sR35r/

Answer 6

我有一个类似的情况填充一个二维数组的选择列表作为$ .ajax回调的结果….

 JSON ... [["AL","Alabama"],["AK","Alaska"],["AS","American Samoa"],["AZ","Arizona"] ... var stateOptions = $('#state'); var html =''; for (var i =1; i' +data[i][1]+ ''; } stateOptions.append(html); 

---

 
  State