Populate options drop-down using javascript

Question

I know there are multiple posts on this topic, and I have followed them to get to this point. However I cannot seem to get my dropdown to populate with my options. Maybe I have been staring at it for too long... any help is appreciated.

var fromYear = document.getElementById("from-year");
var toYear = document.getElementById("to-Year");
var years = ["2019","2020","2021","2022","2023","2024","2025","2026"];
for(var i = 0; i < years.length; i++) {
    var opt = years[i];
    var el = document.createElement("year");
    el.textContent = opt;
    el.value = opt;
    fromYear.appendChild(el);
    toYear.appendChild(el);
}

<div>
  <div class = "date-from">
    <select id="from-year">
      <option>from: Year</option>
    </select>
  </div>

  <div class = "date-to">
    <select id="to-year">
      <option>to: Year</option>
    </select>
  </div>
</div>
{% load static %}
<script src="{% static 'buildstats/buildStats.js' %}"></script>

I have other javascript in this .js file, and it is working correctly and populating elements on the DOM. It is just this options list that does not want to populate. The only item in the options list that populates is the default value I gave it in the HTML doc.

Where are you inserting the code? In the <head> or in the <body>? — Sv443
– Sv443, Commented Feb 7, 2019 at 11:27
var el = document.createElement("year"); - year isn't a valid HTML tag, I don't know if this is why the script is falling over, but surely it should be "option"? — Robin Zigmond
– Robin Zigmond, Commented Feb 7, 2019 at 11:28
document.getElementById("to-Year") notice the capitalised Year. — Turnip
– Turnip, Commented Feb 7, 2019 at 11:29

André Teixeira · Accepted Answer · 2019-02-07 21:05:51Z

1

var el = document.createElement("year") is not an option, since you are working with a select element, you should use:

var el = document.createElement("option");

Also you are getting the element with document.getElementById("to-Year"), there is a typo there, since your element id is to-year (lower case).

This should make it:

var fromYear = document.getElementById("from-year");
var toYear = document.getElementById("to-year");
var years = ["2019","2020","2021","2022","2023","2024","2025","2026"];
for(var i = 0; i < years.length; i++) {
    var elfrom = document.createElement("option");
    var elto = document.createElement("option");
    elfrom.text = years[i];
    elfrom.value = years[i];
    elto.text = years[i];
    elto.value = years[i];
    fromYear.appendChild(elfrom);
    toYear.appendChild(elto);
}

<div>
  <div class = "date-from">
    <select id="from-year">
      <option>from: Year</option>
    </select>
  </div>

  <div class = "date-to">
    <select id="to-year">
      <option>to: Year</option>
    </select>
  </div>
</div>

edited Feb 7, 2019 at 21:05

answered Feb 7, 2019 at 11:31

André Teixeira

2,6124 gold badges30 silver badges43 bronze badges

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

2 Comments

Robin Zigmond Over a year ago

This isn't working for the "from year". Looks like there's another error in the OP that no-one has spotted yet - you have to copy the element before appending it in a second place, else it will "move" when appended the second time.

André Teixeira Over a year ago

You are right. I've adjusted the snippet so it works properly. ty

Callam · Accepted Answer · 2019-02-07 11:31:39Z

1

const fromYear = document.getElementById("from-year");
const toYear = document.getElementById("to-year");
const years = ["2019","2020","2021","2022","2023","2024","2025","2026"];

years.forEach(year => {
  fromYear.append(new Option(year, year));
  toYear.append(new Option(year, year));
});

<div>
  <div class = "date-from">
    <select id="from-year">
      <option>from: Year</option>
    </select>
  </div>

  <div class = "date-to">
    <select id="to-year">
      <option>to: Year</option>
    </select>
  </div>
</div>

answered Feb 7, 2019 at 11:31

Callam

11.5k2 gold badges36 silver badges33 bronze badges

Comments

ellipsis · Accepted Answer · 2019-02-07 11:38:39Z

You used the id for to-year wrong. There is no element called year which you can create, put options in createelement instead. And you cannot append one element to multiple selects. You have to create seperate elements and append both to the respective selects

var fromYear = document.getElementById("from-year");
var toYear = document.getElementById("to-year");
var years = ["2019","2020","2021","2022","2023","2024","2025","2026"];
for(var i = 0; i < years.length; i++) {
    var opt = years[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    var el1 = document.createElement("option");
    el1.textContent = opt;
    el1.value = opt;
    fromYear.appendChild(el);
       toYear.appendChild(el1);
}

<div>
  <div class = "date-from">
    <select id="from-year">
      <option>from: Year</option>
    </select>
  </div>

  <div class = "date-to">
    <select id="to-year">
      <option>to: Year</option>
    </select>
  </div>
</div>

Collectives™ on Stack Overflow

Populate options drop-down using javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related