Member Avatar for junaid_5

First drop down menu to auto change the options of a second dropdown, when you select 2nd it changes the 3rd .

<select name="types"> 
<option value="">---- Select job ----</option>
<option value="1">Job1</option>
<option value="2" >Job2</option> 
<option value="3">Job3</option>
</select>

<select name="gender" > 
<option value="" >---- Select Gender----</option>
<option value="male" selected>Male</option>
<option value="female">Female</option> 
</select>

<select name="city" > 
<option value="" >---- Select city ----</option>
<option value="city1" >city1</option>
<option value="city2">city2</option> 
<option value="city3" >city3</option>
<option value="city4">city4</option>
</select>

I have three drop down menus.

there are 3 dropdown menus, i want 2nd and 3rd drop menu to become visible and enable when i select the job2 from 1st drop download list . I am new to this stuff , please anyone that can help me to start ?

Edited by Dani because: Formatting fixed
  • 2 Contributors
  • 1 Reply
  • 563 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by tapananand

Dani AI

Generated

As described, keep the 2nd and 3rd selects hidden/disabled by default and show + enable them only when the appropriate first-select option is chosen. is correct that Ajax/fetch is useful when the dependent lists come from the server, but for small static lists a client-side mapping is simpler and faster. The pattern below supports both: mark the triggering option (with a data attribute) and either populate from a local mapping or fetch JSON when needed.

document.addEventListener('DOMContentLoaded', function () {
  const job = document.getElementById('jobSelect');
  const second = document.getElementById('secondSelect');
  const third = document.getElementById('thirdSelect');

  function setHidden(el, hidden) {
    el.disabled = hidden;
    el.style.display = hidden ? 'none' : '';
    el.setAttribute('aria-hidden', hidden ? 'true' : 'false');
    if (hidden) el.selectedIndex = 0;
  }

  function populate(sel, items) {
    sel.innerHTML = '<option value="">-- choose --</option>';
    items.forEach(i => {
      const o = document.createElement('option');
      o.value = i.value;
      o.textContent = i.label;
      sel.appendChild(o);
    });
  }

  function update() {
    const opt = job.options[job.selectedIndex];
    const show = opt && opt.dataset.showDependents === 'true';
    setHidden(second, !show);
    setHidden(third, !show);

    if (show && opt.dataset.remoteEndpoint) {
      fetch(opt.dataset.remoteEndpoint)
        .then(r => r.json())
        .then(data => {
          if (data.second) populate(second, data.second);
          if (data.third) populate(third, data.third);
        })
        .catch(err => console.error('Failed to load options:', err));
    }
  }

  job.addEventListener('change', update);
  update(); // set initial state
});

Notes and quick troubleshooting:

  • Add data-show-dependents="true" (and optionally data-remote-endpoint="/api/...") to the first-select option that should reveal dependents; otherwise check job.value for your trigger value.
  • Always disable hidden selects and reset their selectedIndex so stale values are not submitted.
  • For server requests watch CORS and return JSON like { "second": [{ "value":"x","label":"X" }], "third": [...] }.
  • For accessibility, use aria-hidden and ensure keyboard focus moves sensibly when elements appear.
  • If JavaScript may be disabled, provide a server-side fallback or leave the selects visible by default.

This approach keeps the UI responsive and maintainable: client-side mapping for small static sets, fetch/Ajax for dynamic server-driven lists (as suggested).

Member Avatar for tapananand

You need to hide these two and on selecting the option in first drop down menu call a handler which uses Ajax to change the options of 2nd and 3rd drop down.

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.