オプションリストを動的に構築する方法

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>