jQuery를 사용하여 배열로 드롭 다운 선택 선택

Question

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 

하지만 오류를 받고 있어요. 각 기능은 내가이 웹 사이트에서 얻은 것입니다.

1 차원 배열을 사용하고 있기 때문에 폭탄이 튀어 나옵니까? 나는 옵션과 텍스트가 같기를 원한다. 루프에 대한

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

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

내가 사용한 솔루션은 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> 

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

해결책은 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,}); 

잇 짜잔를 호출! 당신이