如何动态建立选项列表

Question

I have a dropdown list I need to populate with jquery as the list contents will change. I found the basis for the following code on this site. But it is coded to run a set number of items. Here is my jsfiddle . You can see if the button is clicked the list contents change. But the list is read from a database and might have 1 item or a hundred. So I added a loop to read through the list and add it to the options list but no matter what I tried it failed. My last attempt is here .

My question is how to change from this:

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

to something like this:

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

Here is the code from my first jsfiddle:

    <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

You could simplify the building of the options by passing the cars array to your function:

 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)

An updated JSFiddle is here .

Answer 2

Try as follows

 $(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>