Member Avatar for kartikkp

I have a question about the drop down lists in html that I have, I want to find a way that I could display a different drop down list depending on the value of the drop down list above. Say I had a drop down of clothes and the person picked "hats" then I would want another drop down list to appear with different types of hats to choose from. I've googled away but it's been hard to find something that can solve this problem so if anyone has a solution that I could use, please let me know!

  • 4 Contributors
  • 3 Replies
  • 195 Views
  • 4 Months Discussion Span
  • Latest Post Latest Post by NickNasty

Dani AI

Generated

Good suggestions already from and — both demos show the AJAX route — so here are concise, practical options you can apply immediately and some gotchas to avoid.

If your child lists are small and static, do it client-side: keep a simple JS map and repopulate the second <select> on the parent change. This avoids network calls and is fast. Use DOM methods (createElement/textContent) rather than raw innerHTML for safety, and call .focus() on the child so keyboard users land there.

<select id="category" name="category">...</select>
<select id="type" name="type" disabled><option>Select a category</option></select>

<script>
const data = { hats:[{v:"cap",t:"Cap"},{v:"beanie",t:"Beanie"}], shirts:[{v:"tee",t:"T-Shirt"}] };
const cat = document.getElementById("category"), type = document.getElementById("type");
cat.addEventListener("change", ()=>{
  type.textContent = "";
  (data[cat.value]||[]).forEach(o=>{
    const opt = document.createElement("option"); opt.value = o.v; opt.textContent = o.t; type.appendChild(opt);
  });
  type.disabled = !(data[cat.value]||[]).length;
  if(!type.disabled) type.focus();
});
</script>

If your lists are large or dynamic, load child options on demand (AJAX/fetch). Return compact JSON (value/text pairs), populate the select as above, handle errors and cache common responses. Both approaches should degrade gracefully: provide a server-rendered fallback or a <noscript> fallback for users without JS.

Accessibility and form-submission notes: always use <label for="...">, announce updates with an aria-live region if helpful, and be careful with disabled vs hidden. Disabled controls are not submitted with the form; elements hidden via CSS (display:none) still submit unless disabled. When parent changes, clear or reset the child value to avoid sending stale selections. For bigger projects consider mature libraries (select2, chained plugins) but only after deciding whether client or server loading best fits your data size and update frequency.

Recommended Answers

All 3 Replies

Member Avatar for mike00

You have to update your techniques and try to find it on Goole you will get full access to that formula to solve your problem

Member Avatar for pritaeas

You will need a combination of HTML, Javascript, AJAX and a server script. Are you after something like ?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.