使用jQuery填充下拉选择数组使用jQuery

我想填充下拉选择数组使用jQuery。使用jQuery填充下拉选择数组使用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

但我发现了一个错误。每个功能都是我从这个网站下载的。

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

来源

2010-08-10 coson

追加的项目之一，在对DOM一次添加的功能被认为是非常缓慢的，是高度_not advised_。更具性能的方法是建立一个字符串并在循环 – 2010-08-10 04:58:06

尝试for循环：

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

来源

2010-08-10 04:41:42 Reigel

不适用于我之后追加它？ – Syno 2017-02-01 15:06:53

如果你正在处理的数组不是数字或不是来自安全源，你应该使用第一种技术，除了使用'.text（number [i]）'而不是'.html（number [i]）''。这将确保您不会冒任何注入漏洞的风险。 – webwake 2017-07-26 13:56:06

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

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做似乎增添几分更多的性能（这不是明显对这样的小数组）

来源

2010-08-10 04:55:03

如果您有预定义的密钥，这是最好的选择 – RSM 2013-11-15 16:23:19

你也可以这样做：

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

来源

2012-04-17 05:34:16 Cheeso

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

来源

2015-01-22 06:04:08 srikanth

我使用的解决方案是创建一个使用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>

来源

2015-05-11 19:30:18 user3912028

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

来源

2015-05-17 17:06:10

一种解决方案是创建一个采取JSON地图自己的jQuery插件，并填充选择它。

(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瞧！

你可以在你的插件，只要你喜欢

来源

2015-07-29 12:17:45 florex

使用jQuery填充下拉选择数组使用jQuery

回答

相关问题