How to add another identical dropdown list?

Question

Hi I have this very simple code to go along with a revision timetabler I am creating for a school project. It's just a simple dropwdown list that allows the user to select the subjects they do. How would I add a button that creates another identical list below so the user can add more than 1 subject if they wish?

<!doctype html>
<html>
<head>
<title>Select your subjects</title>
<select id="subject1" name="subject1">
<option value="Maths">Maths</option>
<option value="Physics">Physics</option>
<option value="English">English</option>
<option value="Compting">Computing</option>
</select>
</head>
<body>
</body>
</html>

What have you tried so far? Have you looked at Element.cloneNode? — Rob M.
– Rob M., Commented Sep 21, 2016 at 17:05

Dave Chen · Accepted Answer · 2016-09-21 17:25:28Z

3

Something like this?

Note that I've changed the name of the select to be an array[]. So when you're processing the data on the server end, just note you'll be handling an array of element and not subject1, subject2, subject3, etc.

function addCourse() {
  document.getElementById("subjects").innerHTML += '\
<br><select name="subject[]">\
<option value="Maths">Maths</option>\
<option value="Physics">Physics</option>\
<option value="English">English</option>\
<option value="Compting">Computing</option>\
</select>';
}

addCourse();

document.getElementById("add").addEventListener("click", addCourse);

<!doctype html>
<html>

<head>
</head>

<body>
  <form method="post" action="">
    <title>Select your subjects</title>
    <div id="subjects">
    </div>
  </form>
  <input type="button" id="add" value="Add Course">
</body>

</html>

I'd actually recommend a dropdown to specify how many lists the user wants. So something like this would be better:

var maxCourses = 5;

var select = document.getElementById("num");
var subjects = document.getElementById("subjects");
var previous = 1;

for (var i = 1; i <= maxCourses; i++) {
  var opt = document.createElement('option');
  opt.value = i;
  opt.innerHTML = i;
  select.appendChild(opt);
}

select.addEventListener("change", function() {
  var diff = select.value - previous;
  for (var i = 0; i < Math.abs(diff); i++)
    if (diff > 0)
      addCourse();
    else
      removeCourse();

  previous = select.value;
});

function addCourse() {
  subjects.innerHTML += '\
<select name="subject[]">\
<option value="Maths">Maths</option>\
<option value="Physics">Physics</option>\
<option value="English">English</option>\
<option value="Compting">Computing</option>\
</select>';
}

function removeCourse() {
  subjects.removeChild(subjects.lastChild);
}

addCourse();

select {
  display: block;
}

<!doctype html>
<html>

<head>
</head>

<body>
  <form method="post" action="">
    <title>Select your subjects</title>
    Number of Courses:
    <select id="num"></select><br>
    <div id="subjects">
    </div>
  </form>
</body>

</html>

edited Sep 21, 2016 at 17:25

answered Sep 21, 2016 at 17:09

Dave Chen

11k8 gold badges42 silver badges72 bronze badges

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

2 Comments

Adam Anderson Over a year ago

Thank you very much, this is just what I was looking for.

Roshan Bhumbra Over a year ago

The first one seems to reset all of the dropdowns when you click add course

Collectives™ on Stack Overflow

How to add another identical dropdown list?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related