How i can show a select list only after another select (parent) has been selected

Question

Like i said in the title i want to keep a list hidden until another another list above has been selected, for example show student list after a class had been selected (so only student who belong to the selected class are shown)

<select name="class">
   <option value="">class1</option>
   <option value="">class2</option>
</select>

<select name="student">
  <option value="">student1</option>
  <option value="">student2</option>
</select>

Possible duplicate of [Proper way to make HTML nested list?](https://stackoverflow.com/questions/5899337/proper-way-to-make-html-nested-list) — Remy, Jan 23 '19 at 09:25
depending on the data, you can tackle this in many ways, your question is too broad though. if its from the table you could query based on the first input and so on — Kevin, Jan 23 '19 at 09:27
Ghost, i thought about that but if i query based on the first one than i would need to submit right? Or can i for example auto submit after i pick an option? — user3564550, Jan 23 '19 at 09:29
its basically the same principle that some sites use in their city selection dropdowns, you select a country, lets say, USA, then the next dropdown shows all states, and so on, it depends on the inputs. i'd suggest you search first using "cascading dropdown php mysql" along those lines, you'll get the idea from that — Kevin, Jan 23 '19 at 09:30
it depends on your requirements, if you wouldn't mind adding a submission loading of page you can use a form and a submit button, some choose to do an asynchronous call, it depends on what you require. — Kevin, Jan 23 '19 at 09:31
Possible duplicate of [Jquery dependent drop down boxes populate- how](https://stackoverflow.com/questions/5910281/jquery-dependent-drop-down-boxes-populate-how) — dearsina, Jan 23 '19 at 09:32

score 1 · Answer 1 · edited Jan 23 '19 at 09:50

Initially apply a hidden class (with display: none styling) to the second select list and then on the change of value (indicating a choice has been made) in the first select - remove the hidden class.

EDIT - as as suggested by @HerrSerker - the event listener is now in the JS as opposed to inline in the HTML.

Note that each select list has a selected disabled option - to allow for a blank option rather than the first option selected by default.

// add event listener for change of class select list
document.querySelector('select[name="class"]')
  .addEventListener('change', updateStudent)


//function to remove the hidden class and styling of the second select list
function updateStudent() {
 var el = document.querySelector('select[name="student"].hidden');
 el.classList.remove('hidden')

 }

select[name="student"].hidden { 
 display:none
}

<select name="class">
  <option disabled selected></option>
   <option value="">class1</option>
   <option value="">class2</option>
</select>

<select name="student" class="hidden">
  <option disabled selected></option>
  <option value="">student1</option>
  <option value="">student2</option>
</select>

I would add the event listener with JS not with HTML attribute: `document.querySelector('select[name=class"]').addEventListener('change', updateStudent)` — yunzen, Jan 23 '19 at 09:41
@HerrSerker - thanks - answer updated to suit your approach. cheers — gavgrif, Jan 23 '19 at 09:49

How i can show a select list only after another select (parent) has been selected

1 Answers1