Toggle the three option menus based on first using Javascript

user_13912869 0
Viewed 45

When I click on another, the previous should not be visible.

I want that if I select A, and then B, and then C, the inner HTML should show C content only. Can someone help me with how to do this?

I actually need it for a jsp form where I can toggle between the options and then get parameter. I am stuck on this.

function myFunction() {
  if (document.getElementById("abcid").selectedIndex == "1") {
    document.getElementById("aid").innerHTML = "A:<select>" +
      "<option>Select-</option>" +
      "<option>Alex</option>" +
      "<option>Jack</option>" +
      "</select>";
  } else if (document.getElementById("abcid").selectedIndex == "2") {
    document.getElementById("bid").innerHTML = "B:<select>" +
      "<option>Select-</option>" +
      "<option>US</option>" +
      "<option>Australia</option>" +
      "<option>India</option>" +
      "</select>";
  } else if (document.getElementById("abcid").selectedIndex == "3") {
    document.getElementById("cid").innerHTML = "C:<select>" +
      "<option>Select-</option>" +
      "<option>Blue</option>" +
      "<option>Green</option>" +
      "<option>Red</option>" +
      "</select>";
  }
}
<table>
  <tr>
    <td>ABC:
      <select id="abcid" onchange="myFunction()">
        <option>Select-</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
    </td>
  </tr>
  <tr>
    <td id="aid"></td>
  </tr>
  <tr>
    <td id="bid"></td>
  </tr>
  <tr>
    <td id="cid"></td>
  </tr>
</table>

html javascript
2 Answers

an easier way to do this...

const
  selectABC = document.querySelector('#abcid')
, trSelect2 = document.querySelector('tr.noDisplay')
, label_2   = trSelect2.querySelector('label')
, select_2  = trSelect2.querySelector('select')
, selCases =
  { A: { label: 'Aaa', sels:[ {k: '1', v:'Alex' }, {k: '2', v:'Jack'      }                       ] }
  , B: { label: 'Bbb', sels:[ {k: 'w', v:'US'   }, {k: 'x', v:'Australia' }, {k: 'y', v:'India' } ] }
  , C: { label: 'Ccc', sels:[ {k: '$', v:'Blue' }, {k: '£', v:'Green'     }, {k: '§', v:'Red'   } ] }
  };
  
selectABC.onchange = e =>
  {
  select_2.length        = 1
  select_2.selectedIndex = 0
  label_2.textContent    = selCases[selectABC.value].label
  selCases[selectABC.value].sels.forEach(({k,v}) => select_2.add( new Option(v,k)) )
  trSelect2.classList.remove('noDisplay')
  }
.noDisplay { display: none; }
<table>
  <tr>
    <td>
      <label>ABC:</label>
      <select id="abcid">
        <option value="" selected disabled>Select-</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </select>
    </td>
  </tr>
  <tr class="noDisplay">
    <td>
      <label></label>
      <select>
        <option value="" selected disabled>Select-</option>
      </select>
    </td>
  </tr>
</table>

user_106690100

Here you can find a solution:

var select = document.querySelector("#abcid");

select.addEventListener('input', function (event) {
  var conditionals = document.querySelectorAll('.conditional');
  var selectedValue = select.value;
  var selectedSub = document.querySelector("#abcid-"+select.value);

  for(var i=0; i<conditionals.length; i++){
    if(selectedSub.id === conditionals[i].id){
      conditionals[i].classList.remove('hide');      
      conditionals[i].classList.add('show');      
    }else{
      conditionals[i].classList.add('hide');      
      conditionals[i].classList.remove('show');      
    }
  }

});
.hide{
  display:none;
}

.show{
  display:block;
}
ABC:
  <select id="abcid">
    <option>Select-</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>

  <select id="abcid-A" class="conditional hide">
    <option>Select-A</option>
    <option>A-A</option>
    <option>A-B</option>
    <option>A-C</option>
  </select>

  <select id="abcid-B" class="conditional hide">
    <option>Select-B</option>
    <option>B-A</option>
    <option>B-B</option>
    <option>B-C</option>
  </select>

  <select id="abcid-C" class="conditional hide">
    <option>Select-C</option>
    <option>C-A</option>
    <option>C-B</option>
    <option>C-C</option>
  </select>

user_113684830
Related