동적으로 옵션 목록을 작성하는 방법

Question

목록 내용이 변경 될 때 jquery로 채울 필요가있는 드롭 다운 목록이 있습니다. 이 사이트에서 다음 코드의 기초를 찾았습니다. 그러나 일련의 항목을 실행하도록 코딩되어 있습니다. 여기 내 jsfiddle입니다. 버튼이 클릭되면 목록 내용이 변경되는지 확인할 수 있습니다. 그러나 목록은 데이터베이스에서 읽혀지고 1 개의 항목 또는 100 개의 항목이있을 수 있습니다. 그래서 루프를 추가하여 목록을 읽고 옵션 목록에 추가했습니다.하지만 시도한 것에 관계없이 실패했습니다. 마지막 시도는 here입니다. 여기

var options '';  
    for (var i = 0; i < cars.length; ++i) {   
     options = 
     {text: cars[i], value: i}, 
     ;   
    } 
    options = [ + options + ]; 

내 첫 jsfiddle의 코드입니다 :

var options = [ 
     {text: cars[0], value: 1}, 
     {text: cars[1], value: 2}, 
     {text: cars[2], value: 3} 
     ];  

이 같은 뭔가 :

내 질문은 이것에서 변경하는 방법입니다

<script> 
    var getlist = function() { 

    var cars = ["Saab", "Volvo", "BMW"]; 

    var options '';  
    for (var i = 0; i < cars.length; ++i) {   
     options = 
     {text: cars[i], value: i}, 
     ;   
    } 
    options = [ + options + ]; 


     $("#v_make").replaceOptions(options); 
    }   

    $('#button').click(getlist); 

    (function($, window) { 
     $.fn.replaceOptions = function(options) { 
     var self, $option; 

     this.empty(); 
     self = this; 

     $.each(options, function(index, option) { 
      $option = $("<option></option>") 
      .attr("value", option.value) 
      .text(option.text); 
      self.append($option); 
     }); 
     }; 
    })(jQuery, window) 
    </script> 

    <select id="v_make"> 
    <option>start</option> 
    </select> 
    <input type="button" id="button" value="Click Me" /> 

Answer 1

당신은 당신의 함수에 cars 배열을 전달하여 옵션의 건물을 단순화 수 :

var getlist = function() { 
    var cars = ["Saab", "Volvo", "BMW"]; 
    $("#v_make").replaceOptions(cars); 
} 
$('#button').click(getlist); 

(function($, window) { 
    $.fn.replaceOptions = function(options) { 
    var self, $option; 

    this.empty(); 
    self = this; 

    $.each(options, function(index, option) { 
     $option = $("<option></option>") 
     .attr("value", index) 
     .text(option); 
     self.append($option); 
    }); 
    }; 
})(jQuery, window) 

업데이트 된 JSFiddle이 here입니다.

Answer 2

으로 시도 따르기 :

$(document).ready(function() { 
 

 
    var x = 0; 
 
    var y = 0; 
 

 
    $('#addBtn').on('click', function() { 
 
    
 
    $('<option>').val(x).text(y).appendTo('#select1'); 
 

 
    x++ 
 
    y++ 
 

 
    }); 
 

 

 

 
})

<select id="select1" style="width:100%;"> 
 

 
<option value="0" selected>(Please select an option)</option> 
 
</select> 
 
<button id="addBtn">Add</button> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>