Question

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

var states = ["Select State","","Alabama","AL","Alaska","AK","Arizona","AZ","Arkansas","AR",...];
$.each(states, function(val, text) {
    $('#selector').append( $('<option> </option>').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];
    $('<option/>').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($('<option> </option>').val(states[i+1]).html(states[i]));  
}

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

以上是working example以上内容。

另一个选择是使用对象而不是数组，使用状态名称或缩写作为键，另一个选项作为值。 编辑：就像@ 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( $('<option> </option>').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.length; i+=2) {
    $('#selector').append( $('<option value="' + states[i] + '">' + states[i-1] + '</option>').val(val).html(text) )
}

Answer 5

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

var states = [{"text":"Select State","val":""},{"text":"Alabama","val":"AL"}]; //etc
$.each(states, function(val, statedata) {
    $('#selector').append( $('<option> </option>').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.length; i++){
    html+= '<option value="' +data[i][0]+ '">' +data[i][1]+ '</option>';
}
stateOptions.append(html);

<form name="form" id="form">

<select name="state" id="state">
        <option value=''>State</option>
</select>

</form>

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

6 个答案: