I have a drop-down list where depending on the selected value, the next drop-down list shows specific values. when changing the value of the first list and then going back to the old value, the second list does not update. keeps the same value selected before. How can I make the second list update to the value I marked as selected by default whenever I change the value of the first list?

I hope you guys were able to understand me, and I thank you for your time.

Here's the code:

    <select onchange="showprd('hidevalue', this), showprd2('hidevalue2', this)">
<option value="" disabled selected hidden>Selecione</option>
<option value="0">São Francisco</option>
<option value="1">Bradesco</option>
</select>
<br>
<br>
<select hidden id="hidevalue">
    <option value="" disabled selected hidden>Selecione o produto</option>
    <option value="pleno">Pleno</option>
    <option value="integrado">Integrado</option>
    </select>
    <select hidden id="hidevalue2">
        <option value="" disabled selected hidden>Selecione o produto</option>
        <option value="junior">Junior</option>
        <option value="senior">Senior</option>
        </select>
</body>
<script>
   function showprd(id, elementValue) {
      document.getElementById(id).style.display = elementValue.value == 0 ? 'block' : 'none';
   }
   function showprd2(id, elementValue) {
      document.getElementById(id).style.display = elementValue.value == 1 ? 'block' : 'none';
   }
</script>

I have a drop-down list where depending on the selected value, the next drop-down list shows specific values. when changing the value of the first list and then going back to the old value, the second list does not update. keeps the same value selected before. How can I make the second list update to the value I marked as selected by default whenever I change the value of the first list?

I hope you guys were able to understand me, and I thank you for your time.

Here's the code:

    <select onchange="showprd('hidevalue', this), showprd2('hidevalue2', this)">
<option value="" disabled selected hidden>Selecione</option>
<option value="0">São Francisco</option>
<option value="1">Bradesco</option>
</select>
<br>
<br>
<select hidden id="hidevalue">
    <option value="" disabled selected hidden>Selecione o produto</option>
    <option value="pleno">Pleno</option>
    <option value="integrado">Integrado</option>
    </select>
    <select hidden id="hidevalue2">
        <option value="" disabled selected hidden>Selecione o produto</option>
        <option value="junior">Junior</option>
        <option value="senior">Senior</option>
        </select>
</body>
<script>
   function showprd(id, elementValue) {
      document.getElementById(id).style.display = elementValue.value == 0 ? 'block' : 'none';
   }
   function showprd2(id, elementValue) {
      document.getElementById(id).style.display = elementValue.value == 1 ? 'block' : 'none';
   }
</script>

• javascript
• html

Share Improve this question Follow edited May 13, 2022 at 6:39 ash 1,05511 gold badge77 silver badges2323 bronze badges asked May 13, 2022 at 3:31 Alexandre SanchesAlexandre Sanches 4111 silver badge55 bronze badges 1

• using a framework would make your life easier, otherwise I think the 'onchange' should be 'onChange' – zergski Commented May 13, 2022 at 3:42

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

TL;DR. Control the input value changes in one place.

Please see the updated snippet below. html structure hasn't been changed, but I've removed the inline js call and updated the id names. JavaScript blocks are mented in details.

In a nut-shell, this code listens for any change to the parent select dropdown. Whenever a change occurs, its child dropdowns will reset their values and toggle their visibility accordingly.

// Assign each dom element to a variable
const primarySelect = document.querySelector('#primary');
const childSelect1 = document.querySelector('#child1');
const childSelect2 = document.querySelector('#child2');
const defaultValues = document.querySelectorAll('.default');

function resetInputs() {
  // Reset the child select options to default
  defaultValues.forEach(option => option.selected = true);
}
function handlePrimary(e) {
  // Reset the child select values whenever the parent value changes
  resetInputs();
  // `input` value is always a string. Here we're converting it to a number
  const val = parseFloat(e.target.value);
  // Toggle visibility of child select dropdowns
  [childSelect1, childSelect2].
    forEach((select, i) => select.style.display = val === i ? 'block' : 'none');
}

primarySelect.addEventListener('change', handlePrimary);

<select id="primary">
  <option value="" disabled selected hidden>Selecione</option>
  <option value="0">São Francisco</option>
  <option value="1">Bradesco</option>
</select>
<br>
<br>
<select hidden id="child1">
  <option class="default" value="" disabled selected hidden>Selecione o produto</option>
  <option value="pleno">Pleno</option>
  <option value="integrado">Integrado</option>
</select>
<select hidden id="child2">
  <option class="default" value="" disabled selected hidden>Selecione o produto</option>
  <option value="junior">Junior</option>
  <option value="senior">Senior</option>
</select>

If I understood correctly, the expected behavior is when the second or third <select> is hidden, the <select> should go back to default (the first <option>?). If so, then remove disabled and hidden from the first <option> of the second and third <select> then add the following:

selectObj.hidden = true;
selectObj.selectedIndex = 0;

The example below has a <form> wrapped around everything (always use a form if you have more than one form control. By using HTMLFormElement interface I rewrote the code and can reference all form controls with very little code. Inline event handlers are garbage so don't do this:

<select id='sel' onchange="lame(this)">

Instead do this:

selObj.onchange = good;

OR

selObj.addEventListener('change', better)

Read about events and event delegation

const UI = document.forms.UI;

UI.onchange = showSelect;

function showSelect(e) {
  const sel = e.target;
  const IO = this.elements;

  if (sel.id === "A") {
    if (sel.value === '0') {
      IO.B.hidden = false;
      IO.C.hidden = true;
      IO.C.selectedIndex = 0;
    } else {
      IO.B.hidden = true;
      IO.B.selectedIndex = 0;
      IO.C.hidden = false;
    }
  }
}

<form id='UI'>
  <select id='A'>
    <option disabled selected hidden>Pick</option>
    <option value="0">0</option>
    <option value="1">1</option>
  </select>
  <br>
  <br>
  <select id="B" hidden>
    <option selected>Pick B</option>
    <option value="0">0</option>
    <option value="1">1</option>
  </select>
  <select id="C" hidden>
    <option selected>Pick C</option>
    <option value="0">0</option>
    <option value="1">1</option>
  </select>
</form>

I give you an example for your reference:

let secondList = [
  [{
      value: "pleno",
      text: "Pleno"
    },
    {
      value: "integrado",
      text: "Integrado"
    }
  ],
  [
  {
      value: "junior",
      text: "Junior"
    },
    {
      value: "senior",
      text: "Senior"
    }
  ]
]
function update(v){
    let secondSelectBox=document.getElementById("second");
  secondSelectBox.style.display="none";
  
  let optionList=secondList[v.value];
  
  if (optionList){
    let defaultOption=new Option("Selecione o produto","");
    secondSelectBox.innerHTML="";
    secondSelectBox.options.add(defaultOption);
    optionList.forEach(o=>{
        let vv=new Option(o.text,o.value);
      secondSelectBox.options.add(vv);
    })
    secondSelectBox.style.display="block";
  }
}

<select onchange="update(this)">
  <option value="" disabled selected hidden>Selecione</option>
  <option value="0">São Francisco</option>
  <option value="1">Bradesco</option>
</select>
<select hidden id="second">
</select>