CODEWITHSUNDEEP
javascriptjqueryhtml
John Dawson
John Dawson

Reputation: 465

For loop to change value of dropdown menu in jQuery

I currently have a drop down menu that lists all the years from 1970 to present. At the moment this is in some embedded JavaScript within the HTML. I'm trying to use an external file to perform the same function with jQuery, but I'm having difficulty.

This is the current method to display the drop down menu:

<h4 class="form_title">Time Span</h4></br>
<label for="select" class="col-lg-2 control-label">From:</label>
<div class="col-lg-3">
    <select class="form-control" name="timeStart" id="select">
        <option value="" selected disabled>Select</option>
        <script type="text/javascript">
            // get current year and then use loop to populate options
            var year = new Date().getFullYear();
            for(i = year; i >= 1970; i--) {
                document.write('<option value="' + i + '">' + i + '</option>');
            };
        </script>
    </select>
</div> <!-- col-lg-3 -->

This works fine but I want to separate the logic from the view. I have tried removing the script entirely from this file and then adding the following in my JavaScript file like so:

var year = new Date().getFullYear();

$("#select").change(function() {
    console.log("Calling function successfully...");
    for(i = year; i >= 1970; i--) {
        document.write('<option value="' + i + '">' + i + '</option>');
    }
});

I put the console.log in there to see if the function is even being called when I select the menu (which it isn't). I have been trying many variations on this but can't figure out what I'm doing wrong (probably several things). Should I be selecting the select tag or the option tag?

Upvotes: 2

Views: 2045

Answers (4)

lshettyl
lshettyl

Reputation: 8181

Another version that uses while loop.

var year = new Date().getFullYear(), $options = $();
while (year >= 1970) {
    var option = year--;
    $options = $options.add($('<option/>', { 'value': option, 'text': option }));
}
$('#select').append($options);

Upvotes: 1

Scheda
Scheda

Reputation: 526

Since you're using JQuery, you'll need to make sure to wrap your code in $(document).ready(function() {});

If you don't, it'll just try and run immediately on load. Wrapping it in that will ensure that the select box is rendered before trying to run your code.

You can see an example of how this works here.

http://jsbin.com/rebahiwupi/1/edit

$(document).ready(function() { var sel = $('select'); var start_year = 1970; for(var i=start_year;i<=new Date().getFullYear();i++) { sel.append('<option value="'+i+'">'+i+'</option>'); } });

Upvotes: 1

Tushar
Tushar

Reputation: 87203

Move your code into ready and use append to add option to the select.

var year = new Date().getFullYear();

$(document).ready(function () {
    console.log("Calling function successfully...");
    var options = '';
    for (i = year; i >= 1970; i--) {
        options += '<option value="' + i + '">' + i + '</option>';
    }

    $('#select').append(options);
});

Upvotes: 3

Konstantin Dinev
Konstantin Dinev

Reputation: 34895

You need to append the options you want to render as children to the select element:

$(document).ready(function() {
    console.log("Calling function successfully...");
    var options = ''
    for(i = year; i >= 1970; i--) {
        options += '<option value="' + i + '">' + i + '</option>';
    }
    $("#select").append(options);
});

Upvotes: 1

Related Questions