How to populate a <select> element with dynamic values in JQuery?

Question

I have 5 select elements with 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 with jQuery. Like: rateArr=[5,2,2,3,5]

What I actually want, like this:

    <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 couldn't sort it out how to approach to solve. So far what i was trying:

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

Answer 1

You have malformed html in $("<option</option>") . The opening tag is missing a >

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> 

Answer 2

The @charlietfl 's answer is the right one, however, I want to add a way to reuse that code in different parts of your Web app.

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> 

See?, with just this call $('.rating').populateOpts({...}) the selects were filled. Now you can use that plugin in any part of your Web app.

Explanation:

• The name of this plugin is populateOpts so, you can use the power of JQuery for selection of elements like you usually use in your Web app, and call your plugin to apply your specific behavior to the selected elements.

• Your plugin receives the array through option source as follow: { source: [5, 2, 2, 3, 5] } . If you don't pass the source option, this plugin won't fill any selected element.

To enable your plugin in your HTML file just add the script tag within the head tag as follow, ie:

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

That line must be after your script tag for jQuery import.

Resource

• A Really Simple jQuery Plugin Tutorial