Chọn danh sách thả xuống thả xuống với mảng bằng cách sử dụng jQuery

Question

Tôi đang cố gắng chọn một danh sách thả xuống với một mảng bằng cách sử dụng jQuery.

Đây là mã của tôi:

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

Nhưng tôi nhận được một lỗi. Mỗi chức năng là một cái gì đó tôi đã nhận ra trang web này.

Máy tính có bị đánh bom vì tôi đang sử dụng mảng một chiều không? Tôi muốn cả tùy chọn và văn bản đều giống nhau.

Answer 1

Cố gắng cho vòng:

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

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

---

tiếp cận tốt hơn nhiều:

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

Việc kê khai mảng có cú pháp không chính xác. Hãy thử những điều sau đây, thay vì:

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

Phần loop dường chánh đáng

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

Như @Reigel đã dường như để thêm một hiệu suất chút (nó không phải là đáng chú ý trên mảng nhỏ như vậy)

Answer 3

Bạn cũng có thể làm điều này:

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

Answer 4

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 5

Giải pháp tôi đã sử dụng là tạo một hàm javascript sử dụng jquery:

Điều này sẽ điền một đối tượng thả xuống trên trang HTML. Xin vui lòng cho tôi biết nơi này có thể được tối ưu hóa - nhưng hoạt động tốt như.

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> 

Answer 6

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

Answer 7

Một giải pháp là tạo ra plugin jquery của riêng bạn mà lấy đồ json và cư trú trong chọn với nó.

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

Bạn có thể gọi nó bằng cách làm này:

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

Những lợi thế được rằng bất cứ nơi nào bạn sẽ phải đối mặt với cùng một vấn đề bạn chỉ cần gọi

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

Et thì đấy!

Bạn có thể thêm các chức năng trong plugin của mình như bạn thích