使用jQuery填充下拉select数组

我想填充一个下拉select与数组使用jQuery。

这是我的代码：

// 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 

但是我得到一个错误。 每个function都是我从这个网站下载的。

是因为我正在使用一维数组而被轰炸？ 我希望选项和文本都一样。

Answer 1

尝试循环：

 var numbers = [1, 2, 3, 4, 5]; for (var i=0;i<numbers.length;i++){ $('<option/>').val(numbers[i]).html(numbers[i]).appendTo('#items'); } 

---

更好的方法：

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

Answer 2

数组声明的语法不正确。 尝试以下方法，而不是：

 var numbers = [ 1, 2, 3, 4, 5] 

循环部分似乎是正确的

 $.each(numbers, function(val, text) { $('#items').append( $('<option></option>').val(val).html(text) ) }); // there was also a ) missing here 

正如@Reigel似乎增加了更多的性能（这是不明显的这样小的数组）

Answer 3

你也可以这样做：

 var list = $('#items')[0]; // HTMLSelectElement $.each(numbers, function(index, text) { list.options[list.options.length] = new Option(index, text); }); 

Answer 4

 var qty = 5; var option = ''; for (var i=1;i <= qty;i++){ option += '<option value="'+ i + '">' + i + '</option>'; } $('#items').append(option); 

Answer 5

一个解决scheme是创build自己的jQuery插件采取JSON地图和填充select与它。

 (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)); 

你可以这样调用它：

 $("#select").fillValues({datas:your_map,}); 

好处就是在任何地方你都会遇到同样的问题

  $("....").fillValues({datas:your_map,}); 

Et瞧！

你可以在你的插件中添加function

Answer 6

 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(''); });`` } } 

Answer 7

我使用的解决scheme是创build一个使用jQuery的JavaScript函数：

这将填充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>