使用 jQuery 用数组填充下拉选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3446069/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Populate dropdown select with array using jQuery
提问by coson
I am trying to populate a dropdown select with an array using jQuery.
我正在尝试使用 jQuery 用数组填充下拉选择。
Here is my code:
这是我的代码：
// Add the list of numbers to the drop down here
var numbers[] = { 1, 2, 3, 4, 5};
$.each(numbers, function(val, text) {
$('#items').append(
$('<option></option>').val(val).html(text)
);
// END
But I'm getting an error. The each function is something I am got off this website.
但我收到一个错误。每个功能都是我从这个网站上得到的。
Is it bombing out because I'm using a one-dimensional array? I want both the option and the text to be the same.
是否因为我使用一维数组而爆炸？我希望选项和文本都相同。
回答by Reigel
Try for loops:
尝试循环：
var numbers = [1, 2, 3, 4, 5];
for (var i=0;i<numbers.length;i++){
$('<option/>').val(numbers[i]).html(numbers[i]).appendTo('#items');
}
Much better approach:
更好的方法：
var numbers = [1, 2, 3, 4, 5];
var option = '';
for (var i=0;i<numbers.length;i++){
option += '<option value="'+ numbers[i] + '">' + numbers[i] + '</option>';
}
$('#items').append(option);
回答by Fabiano Soriani
The array declaration has incorrect syntax. Try the following, instead:
数组声明的语法不正确。请尝试以下操作：
var numbers = [ 1, 2, 3, 4, 5]
The loop part seems right
循环部分似乎是正确的
$.each(numbers, function(val, text) {
$('#items').append( $('<option></option>').val(val).html(text) )
}); // there was also a ) missing here
As @Reigel did seems to add a bit more performance (it is not noticeable on such small arrays)
正如@Reigel 所做的那样，似乎增加了一点性能（在如此小的阵列上并不明显）
回答by Cheeso
You can also do this:
你也可以这样做：
var list = $('#items')[0]; // HTMLSelectElement
$.each(numbers, function(index, text) {
list.options[list.options.length] = new Option(index, text);
});
回答by florex
A solution is to create your own jquery plugin that take the json map and populate the select with it.
一种解决方案是创建您自己的 jquery 插件，该插件采用 json 映射并使用它填充选择。
(function($) {
$.fn.fillValues = function(options) {
var settings = $.extend({
datas : null,
complete : null,
}, options);
this.each( function(){
var datas = settings.datas;
if(datas !=null) {
$(this).empty();
for(var key in datas){
$(this).append('<option value="'+key+'"+>'+datas[key]+'</option>');
}
}
if($.isFunction(settings.complete)){
settings.complete.call(this);
}
});
}
}(jQuery));
You can call it by doing this :
你可以通过这样做来调用它：
$("#select").fillValues({datas:your_map,});
The advantages is that anywhere you will face the same problem you just call
优点是在任何地方你都会遇到同样的问题，你只是打电话
$("....").fillValues({datas:your_map,});
Et voila !
等等！
You can add functions in your plugin as you like
您可以根据需要在插件中添加功能
回答by Ed Barahona
var qty = 5;
var option = '';
for (var i=1;i <= qty;i++){
option += '<option value="'+ i + '">' + i + '</option>';
}
$('#items').append(option);
回答by user3912028
The solution I used was to create a javascript function that uses jquery:
我使用的解决方案是创建一个使用 jquery 的 javascript 函数：
This will populate a dropdown object on the HTML page. Please let me know where this can be optimized - but works fine as is.
这将在 HTML 页面上填充一个下拉对象。请让我知道可以优化的地方 - 但按原样工作正常。
function util_PopulateDropDownListAndSelect(sourceListObject, sourceListTextFieldName, targetDropDownName, valueToSelect)
{
var options = '';
// Create the list of HTML Options
for (i = 0; i < sourceListObject.List.length; i++)
{
options += "<option value='" + sourceListObject.List[i][sourceListTextFieldName] + "'>" + sourceListObject.List[i][sourceListTextFieldName] + "</option>\r\n";
}
// Assign the options to the HTML Select container
$('select#' + targetDropDownName)[0].innerHTML = options;
// Set the option to be Selected
$('#' + targetDropDownName).val(valueToSelect);
// Refresh the HTML Select so it displays the Selected option
$('#' + targetDropDownName).selectmenu('refresh')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
回答by srikanth
function validateForm(){
var success = true;
resetErrorMessages();
var myArray = [];
$(".linkedServiceDonationPurpose").each(function(){
myArray.push($(this).val())
});
$(".linkedServiceDonationPurpose").each(function(){
for ( var i = 0; i < myArray.length; i = i + 1 ) {
for ( var j = i+1; j < myArray.length; j = j + 1 )
if(myArray[i] == myArray[j] && $(this).val() == myArray[j]){
$(this).next( "div" ).html('Duplicate item selected');
success=false;
}
}
});
if (success) {
return true;
} else {
return false;
}
function resetErrorMessages() {
$(".error").each(function(){
$(this).html('');
});``
}
}
