填充下拉列表选择与数组 - 有多个选项

所以我想填充状态的下拉列表，选项的值应该是两个字符值，选项的文本应该是完整状态的名称，使用下面的代码返回值为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)) 
    });

来源

2011-09-29 Alex C

试试这个，使用对象为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/

来源

2011-09-29 17:58:29 Blazemonger

的问题是，回调函数提供给.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已经完成

来源

2011-09-29 17:56:17

那么你有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])) 
});

来源

2011-09-29 17:56:21

，我和其他人，一个正常的循环会更适合这种情况下同意。如果你确实想使用jQuery，这将是一种方法 –

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

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

来源

2011-09-29 17:56:43 bfavaretto

如果你改变了你的阵列是对象的数组，你可以做这样的事情 -

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/

来源

2011-09-29 17:59:52 ipr101

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

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>

来源

2012-09-27 00:52:55

填充下拉列表选择与数组 - 有多个选项

回答

相关问题