Cascading Dropdown Javascript / Html

JavaScript
1

Hi There, new to Html and Javascript coding, I have written a code and I have got stuck, don’t know if it is difficult or easy and I am just not getting it, what I want to do is I have created 3 dropdown boxs and I want to link the 3 of them, i.e first dropdown is a factory, then based on that factory will be the departments on the second dropdown (different departments for different factories) then the third dropdown will be problems arising for the different departments, want to use javascript, Html for this if I can. Below is the code I have put together, as I said new to this and no programming experience, anyone any idea’s, tried a few things found on the internet but cant get any of them to work, tried If / else statements etc. Any help would be much appreciated.

<!DOCTYPE html>
<html lang=“en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Process Control Troubleshooting Guide</title>
</head>
<body>
	<Body bgcolor=White>
		 <p style="text-align:center;"><img src="devro.gif" alt="Devro logo">
		<h1><center><h1 style="color:Red;font-size:50px;">Process Control Troubleshooting Guide</h1>
	<label>Please Select Plant</label>
	<select style="font-size:50px"; id="PlantSelection">
		<option value = "1">select</option>
  		<option value = "2">Moodiesburn</option>
  		<option value = "3">Bellshill</option>
 	</select>
	<h2><center><h2 style="color:Black;font-size:25px;"
	<td class="mobileTDInput">
	<label>Department</label>
	<select style="font-size:50px"; id="DepartmentSelection">
		<option value 1=“Select">select</option>
  		<option value 4=“Drums">Drums</option>
  		<option value 5=“Gel">Gel</option>
		<option value 6=“Solutions">Solutions</option>
		<option value 7=“Wet End">Wet End</option>
		<option value 8=“Shirred">Shirred</option>
		<option value 9=“Heatcure">Heatcure</option>
 	</select>
    </td>
		</h2>
</tr>

<h3><center><h3 style="color:Black;font-size:25px;"
	<td class="mobileTDInput">
	<label>Problem</label>
	<select style="font-size:50px"; id="ProblemSelection>
		<option value 1=“Select">select</option>
  		<option value 10=“Wrong Chemicals Added">Wrong Chemicals Added</option>
  		<option value 11=“Power Cut">Power Cut</option>
		<option value 12=“Contamination">Contamination</option>
	</select>
    </td>
		</h3>
    </tr>
</head>
 
<input type="button" value=Reset onClick="location.href=location.href">

</body>
</html>
2

Hi there!

Can you please upload/share your code to codepen, so we know what you are working on, that way many developers can know what are your issues, on trying to resolve. This way we all have a better understanding on what you are doing, i provide the link for codepen in case you haven’t got one yet. You should probably create an account and share the link.
Thanks ! =)

https://codepen.io/

1 Like
3

As @imendieta has said, if you have a starting point for us to work from, then we can get a better handle on what you’re wanting.

Are you stuck with a certain HTML format? Do you have some control over that, or are you going to be working within the DOM structure you’ve shown above? I ask, because when I first came across your question, I started hacking together a concept project. But to do so, I completely threw out your code. I’m not okay simply giving the answer, but if I can provide something that does something similar to what you want, we can definitely help.

That said, here’s the DOM structure I was working with, in my concept. Note that, for my proof-of-concept, I changed the idea entirely – building a taxonomy system of dropdowns seemed interesting. So the top-level dropdown is ‘Choose a kingdom’ (animal/plant/fungus/monad), which then shows the next dropdown and its relevant data, and continuing to expand out as needed.

Here’s the structure I used:

<article class='main-container'>
  <select class='kingdom-dropdown dropdown'>
      <option>Choose a kingdom:</option>
      <option value='Animalia'>Animalia</option>
      <option value='Plantae'>Plantae</option>
      <option value='Fungi'>Fungi</option>
      <option value='Protista'>Protista</option>
      <option value='Fungi'>Monera</option>
    </select>
    <section data-selection='Animalia'>
      <header>Animalia</header>
      <article>
        <select class='phylum-dropdown dropdown'>
          <option>...</option>
        </select>
        <section data-selection="...">...</section>
      </article>
    </section>
    <section data-selection='Plantae'>
    ...
    </section>
</article>

So note the recursive nature of that structure - each article contains a select, and a collection of section elements. Each section has a data-attribute that matches one of the values in the select. within each of these section elements, we can have a header, any content we want… but we also nest another article, containing a select and a number of matching section elements.

Why do we do this? Because that makes the javascript easy-peasy! with that DOM structure, the logic for the javascript might look something like:

* store a reference to all the elements with the `dropdown` class
* for each of these elements, attach a change listener that:
  - stores the value of the current selection,
  - gets the parent of the current select element,
  - finds all the section elements within that parent,
  - iterates over all these section elements, hiding/showing the appropriate
    section based on a data-selection matching the current selection value

And honestly, it takes very little to get that to work. With, of course, the right DOM structure.

1 Like