How to fill a <select> element with dynamic values ​​in jQuery?

Question

I have 5 selections with the same class.

    <select class="form-control rating"></select>
    <select class="form-control rating"></select>
    <select class="form-control rating"></select>
    <select class="form-control rating"></select>
    <select class="form-control rating"></select>

I want to populate them with dynamic rating values ​​using jQuery. For instance:rateArr=[5,2,2,3,5]

What I really want, for example:

    <select class="form-control rating">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
    </select>
    <select class="form-control rating">
         <option value="1">1</option>
         <option value="2">2</option>
    </select>
    <select class="form-control rating">
         <option value="1">1</option>
         <option value="2">2</option>
    </select>
    <select class="form-control rating">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
    </select>
    <select class="form-control rating">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
    </select>

But it was not possible to figure out how to approach the solution. So far I have tried:

$('.rating').each(function(index,row){ 
    for(i=1; i<= rateArr[index]; i++){
         $(this).append($("<option</option>").text(i).val(i));
    }
});

Answer 1

You have the wrong html in $("<option</option>"). There is no tag in the opened tag>

Try

var rateArr=[5,2,2,3,5]

$('.rating').each(function(index,row){ 
    for(var i=1; i<= rateArr[index]; i++){
         $(this).append($("<option>").text(i).val(i));
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control rating"></select>
<select class="form-control rating"></select>
<select class="form-control rating"></select>
<select class="form-control rating"></select>
<select class="form-control rating"></select>

Run codeHide result

Answer 2

@Charlietfl's answer is correct, however I want to add a way to reuse this code in different parts of your web application.

JQuery plugin

// You can create a js file called jquery.populate.options.js to store this plugin.

(function($) {
  $.fn.extend({
    populateOpts: function(options) {
      var defaults = {
        source: [],
      };

      var options = $.extend(defaults, options);

      return this.each(function(index, row) {
        if (options.source && options.source.length > 0) {
          for (var i = 1; i <= options.source[index]; i++) {
            $(this).append($("<option>").text(i).val(i));
          }
        }
      });
    }
  });
})(jQuery);

// Now you can do the following
$('.rating').populateOpts({ source: [5, 2, 2, 3, 5] });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control rating"></select>
<select class="form-control rating"></select>
<select class="form-control rating"></select>
<select class="form-control rating"></select>
<select class="form-control rating"></select>

Run codeHide result

?, $('.rating').populateOpts({...}) . -.

:

• populateOpts, JQuery , -, .

• source : { source: [5, 2, 2, 3, 5] }. source, .

HTML , script head : i.e:

<script src="(your path)/jquery.populate.options.js"></script>

script jQuery.

• jQuery