Set a selected option in a dynamically populated select dropdown

Question

I have a select dropdown that is dynamically populated like this:

var year = (new Date()).getFullYear(); var minYear = year-95; var options = []; for(var i=minYear; i < year+1; i++){ options.push('<option value="'+i+'">'+i+'</option>'); }

How can I set a selected option?

When i == year then select option?

segarci
– segarci

2015-01-15 12:43:29 +00:00
Commented Jan 15, 2015 at 12:43 — segarci
– segarci, Commented Jan 15, 2015 at 12:43

segarci · Accepted Answer · 2015-01-15 12:57:38Z

1

Add selected to the option (more info about option selected).

Your code should look like this:

var year = (new Date()).getFullYear(); var minYear = year-95; var options = []; for(var i = minYear; i < year + 1; i++) { if (i == year) // Condition for selected option { options.push('<option selected value="' + i + '">' + i + '</option>'); } else { options.push('<option value="' + i + '">' + i + '</option>'); } }

edited Jan 15, 2015 at 12:57

answered Jan 15, 2015 at 12:41

segarci

7371 gold badge11 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2695684 Over a year ago

Very much appreciated. Thank you! Do you happen to know a way to focus on that selected option once the dropdown is expanded?

segarci Over a year ago

It should be focused.

user2695684 Over a year ago

I've added a jQuery library for styling that select dropdown which makes a ul with the options and hides the select. So the option is not focused when expanded.

segarci Over a year ago

Ok. It depends on the library. But that is another question.

Deepu Sasidharan · Accepted Answer · 2015-01-15 12:50:47Z

Try something like this

jQuery

$(document).ready(function () { var year = (new Date()).getFullYear(); var minYear = year - 95; var options = []; for (var i = minYear; i < year + 1; i++) { if (i == 1950) { options.push('<option selected value="' + i + '">' + i + '</option>'); } else { options.push('<option value="' + i + '">' + i + '</option>'); } } $("#sel").html(options); });

HTML

<select id="sel"></select>

DEMO

Collectives™ on Stack Overflow

Set a selected option in a dynamically populated select dropdown

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related