how to add default value to dynamic dropdown list?

Question

I found a code on how to make a dynamic dropdown list for selecting years, but I don't know how to add a default value to the dropdown, this is the code i found on

HTML looping option values in drop down list

HTML

<select id="year"></select>

JS

var start = 2018;
var end = new Date().getFullYear();
var options = "";
for(var year = start ; year <=end; year++){
  options += "<option>"+ year +"</option>";
}
document.getElementById("year").innerHTML = options;

I tried like this but it doesn't work

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

and this

var start = 2018;
var end = new Date().getFullYear();
var options = "<option value=''>Year</option>";
for(var year = start ; year <=end; year++){
  options += "<option>"+ year +"</option>";
}
document.getElementById("year").innerHTML = options;

the result I want is like this

<select id="year">
<option value=''>Year</option> 
<option value=''>2018</option> 
<option value=''>2017</option>   
</select>

anyone know how to do it ?

didn't expext there will be a lot of answers, thank you guys I'm gonna try your answer

Pawan Singh · Accepted Answer · 2018-07-28 16:20:38Z

2

Well you were almost there, try below code

var start = 2012;
var end = new Date().getFullYear();
var options = "<option value='' selected>Year</option>";
for(var year = start ; year <=end; year++){
  options += "<option>"+ year +"</option>";
}
document.getElementById("year").innerHTML = options;

<select id="year"></select>

edited Jul 28, 2018 at 16:20

answered Jul 28, 2018 at 16:15

Pawan Singh

8646 silver badges13 bronze badges

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

Comments

Fobos · Accepted Answer · 2018-07-28 16:14:47Z

Try this:

var start = 2015;
var end = new Date().getFullYear();

var arrDate = function(start, end) {
    var count = (end - start) + 1;
    return Array.apply(0, Array(count)).map(function (element, index) { 
        return index + start;  
    });
}

arrDate(start, end).forEach(function(v) {
    document.getElementById("year").innerHTML += "<option value='"+v+"'>"+ v +"</option>";
});

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

Unmitigated · Accepted Answer · 2018-07-28 16:18:21Z

0

Just add the selected attribute to one of the options to make it the default selected option.

<select>
<option>1</option>
<option selected>2</option>
<option>3</option>
</select>

<select id="year">

</select>
<script>
var start = 2010;
var end = new Date().getFullYear();
var options = "<option value='' selected>Year</option>";
for(var year = start ; year <=end; year++){
  options += "<option>"+ year +"</option>";
}
document.getElementById("year").innerHTML = options;
</script>

edited Jul 28, 2018 at 16:18

answered Jul 28, 2018 at 16:01

Unmitigated

91.3k12 gold badges102 silver badges109 bronze badges

Comments

Ashish Patel · Accepted Answer · 2018-07-28 16:24:28Z

You want to display a default value in your dropdown list of years. Try below code and let me know if that's what you wanted!

html code:

<select id="year"></select>

js code:

var startYear = 2017;
var endYear = new Date().getFullYear();
var options = "<option selected>"+startYear+"</option>";

for(var year = start + 1; year <= end; year++){
  options += "<option>"+ year +"</option>";
}

document.getElementById("year").innerHTML = options;

D. Seah · Accepted Answer · 2018-07-28 16:29:36Z

0

if i understand the question correctly, we want to select the current year.

var start = 2017;
var end = new Date().getFullYear();
var options = "<option value=''>Year</option>";

for (var year = start; year <= end; year++) {
  var selected = year === end ? " selected" : "";
  options += "<option value=\"" + year + "\"" + selected + ">"+ year +"</option>";
}
document.getElementById("year").innerHTML = options;

answered Jul 28, 2018 at 16:29

D. Seah

4,7121 gold badge15 silver badges27 bronze badges

Collectives™ on Stack Overflow

how to add default value to dynamic dropdown list?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Linked

Related