How to populate selectbox using jquery forloop

Question

My problem is how do i populate my Birthday selectbox with data using jquery only? Is it possible to do it? Sorry but I'm just new to this...can anyone give me an example or something?

code:

<div class="form-group input-group">
    <div class="btn-group input-group">
        <span class="input-group-addon">Birthday</span>
        <select name="month" class="btn btn-default" id="bmonth" data-container="body" data-placement="left" data-toggle="popover" data-content="Select your Birthday!" >
            <option>Month</option>
        </select>
        <select name="day" class="btn btn-default" id="bday" data-container="body" data-placement="top" data-toggle="popover" data-content="Select your Birthday!" >
            <option>Day</option>
        </select>
        <select name="year" class="btn btn-default" id="byear" data-container="body" data-placement="right" data-toggle="popover" data-content="Select your Birthday!" >
            <option>Year</option>
        </select>
    </div>

Have you attempted anything thus far? If so can we see your code? If not have you tried googling `jquery add html tags` or something of that sort? — user3507600, May 28 '14 at 18:25

score 2 · Answer 1 · answered May 28 '14 at 18:31

Here is a fiddle

var months = [ "January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December" ];

$(months).each(function(index,value){
   var curHtml = $('#bmonth').html();
   curHtml += '<option value="'+index+'">'+value+'</option>';
   $('#bmonth').html(curHtml);
});

score 2 · Answer 2 · answered May 28 '14 at 18:33

2

Try something like this (Example):

HTML

<select id='year'>
    <option>Year</option>
</select>

JS:

var years = [2010, 2011, 2012, 2013, 2014];
$.each(years, function(k, v){
    var option = $('<option/>', {'value':v, 'text':v});
    $('#year').append(option);
});

You got the idea, try the rest by yourself.

answered May 28 '14 at 18:33

The Alpha

138,380
26
281
300

1

I've never seen that style of creating DOM objects before, but it's very clean; well done. – user3507600 May 28 '14 at 18:47
Thanks for the thumbs up :-) – The Alpha May 28 '14 at 18:49
1

You may like [this answer](http://stackoverflow.com/questions/327047/what-is-the-most-efficient-way-to-create-html-elements-using-jquery/19364869#19364869) @user3507600. – The Alpha May 28 '14 at 18:50
1

Thank you; that is very informative and descriptive. That should help clean up some of my code a bit. – user3507600 May 28 '14 at 19:01

score 1 · Accepted Answer · answered May 28 '14 at 19:04

Here's more of a dynamic option that will change the maximum year for you every year. I set the minimum year to 1900, but you can change this if you want.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="Scripts/jQuery/jquery-2.1.0.min.js"></script>
    </head>
    <body>
        <form id="myForm"><select id="month"></select><select id="day"></select><select id="year"></select></form>
        <script>
            $(document).ready(function () {
                var month = [], day = [], year = [];
                for (var i = 1; i <= 12; i++) {
                    month.push(i);
                }
                for (var i = 1; i <= 31; i++) {
                    day.push(i);
                }
                for (var i = 1900; i <= (new Date().getFullYear()); i++) {
                    year.push(i);
                }
                $.each(day, function (index, d) {
                    $("#day").append("<option>" + d + "</option>");
                });
                $.each(month, function (index, m) {
                    $("#month").append("<option>" + m + "</option>");
                });
                $.each(year, function (index, y) {
                    $("#year").append("<option>" + y + "</option>");
                });
            });
        </script>
    </body>
</html>

http://jsfiddle.net/CfLKV/

score 0 · Answer 4 · answered May 28 '14 at 18:32

You can follow the following code and create your own

<select name="month" id="bmonth">
    <option>Month</option>
</select>

Javascript

$(document).ready(function () {
    var months = [
        'Jan', 'Feb', 'Mar', 'Apr',
        'May', 'Jun', 'Jul', 'Aug',
        'Sep', 'Oct', 'Nov', 'Dec'];
    for (var i = 0; i < months.length; i++) {
        $("#bmonth").append(GetOption(months[i], months[i]));
    }
});

function GetOption(text, value) {
    return "<option value = '" + value + "'>" + text + "</option>";
}

How to populate selectbox using jquery forloop

4 Answers4

Demo