Show next drop-down list

Question

I am trying to create a javascript function so when any option is selected in a drop down, the next drop down appears. I added this function to each option value, so if any option were to be selected the next drop down would appear - the functionality I am after. However, nothing occurs when a user makes a selection from the drop down. Any help would be appreciated.

function hide() {
  document.getElementById("t1").style.display = "none";
  document.getElementById("t2").style.display = "none";
}

function onClick1() {
  document.getElementById("t1").style.display = "block";
}

function onClick2() {
  document.getElementById("t2").style.display = "block";
}

<body onload="hide()">
  <table>
    <tr>
      <td>
        <select>
          <option value="" disabled selected>Title</option>
          <option value="clean" onclick="onClick1()">Clean</option>
          <option value="salvage" onclick="onClick1()">Salvage</option>
          <option value="rebuilt" onclick="onClick1()">Rebuilt</option>
        </select>
      </td>
      <td>
        <select id="t1">
          <option value="" disabled selected>Title Status</option>
          <option value="in hand" onclick="onClick2()">In Hand</option>
          <option value="lien" onclick="onClick2()">Lien</option>
          <option value="missing" onclick="onClick2()">Missing</option>
        </select>
      </td>
      <td>
        <select id="t2">
          <option value="" disabled selected>Title Stat</option>
          <option value="in hand">In Hand</option>
          <option value="lien">Lien</option>
          <option value="missing">Missing</option>
          <option value="ralph jr.">Missing</option>
          <option value="ralph">Missing</option>
        </select>
      </td>
    </tr>
  </table>
</body>

Answer 1

Try using onchange instead of onclick. You can check it below.

<!DOCTYPE html>
<html>

<head>
  <title>Experiment</title>


<script>
  function hide() {
    document.getElementById("t1").style.display = "none";
    document.getElementById("t2").style.display = "none";
  }

  function onClick1(){
    document.getElementById("t1").style.display = "block";
  }

  function onClick2(){
    document.getElementById("t2").style.display = "block";
  }

</script>


  <style type="text/css">

  </style>
</head>

<body onload="hide()">
  <table>
    <tr>
      <td>
        <select onchange="onClick1()">
          <option value="" disabled selected>Title</option>
          <option value="clean">Clean</option>
          <option value="salvage">Salvage</option>
          <option value="rebuilt">Rebuilt</option>
        </select>
      </td>
      <td >
        <select id="t1" onchange="onClick2()">
          <option value="" disabled selected>Title Status</option>
          <option value="in hand">In Hand</option>
          <option value="lien">Lien</option>
          <option value="missing">Missing</option>
        </select>
      </td>
      <td>
        <select id="t2">
          <option value="" disabled selected>Title Stat</option>
          <option value="in hand">In Hand</option>
          <option value="lien">Lien</option>
          <option value="missing">Missing</option>
          <option value="ralph jr.">Missing</option>
          <option value="ralph">Missing</option>
        </select>
      </td>
    </tr>
  </table>

</body>

</html>

Answer 2

onclick event on option tag will fail on most versions of IE, Safari and Chrome:

Remove onClick from option.It should be handle by onChange event on select box.

And if you want to pass the value of selected option then just pass this.value

Try this

<!DOCTYPE html>
<html>

<head>
  <title>Experiment</title>


<script>
  function hide() {
    document.getElementById("t1").style.display = "none";
    document.getElementById("t2").style.display = "none";
  }

  function onClick1(value){
    console.log(value);
    document.getElementById("t1").style.display = "block";
  }

  function onClick2(){
    document.getElementById("t2").style.display = "block";
  }

</script>


  <style type="text/css">

  </style>
</head>

<body onload="hide()">
  <table>
    <tr>
      <td>
        <select onchange="onClick1(this.value)">
          <option value="" disabled selected>Title</option>
          <option value="clean" >Clean</option>
          <option value="salvage" >Salvage</option>
          <option value="rebuilt" >Rebuilt</option>
        </select>
      </td>
      <td >
        <select id="t1" onchange="onClick2()">
          <option value="" disabled selected>Title Status</option>
          <option value="in hand" >In Hand</option>
          <option value="lien" >Lien</option>
          <option value="missing">Missing</option>
        </select>
      </td>
      <td >
        <select id="t2">
          <option value="" disabled selected>Title Stat</option>
          <option value="in hand">In Hand</option>
          <option value="lien">Lien</option>
          <option value="missing">Missing</option>
          <option value="ralph jr.">Missing</option>
          <option value="ralph">Missing</option>
        </select>
      </td>
    </tr>
  </table>

</body>

</html>

Answer 3

Add onchange event handler to select tag instead of onclick to each of the option

function hide() {
  document.getElementById("t1").style.display = "none";
  document.getElementById("t2").style.display = "none";
}

function onClick1() {
  document.getElementById("t1").style.display = "block";
}

function onClick2() {
  document.getElementById("t2").style.display = "block";
}

<body onload="hide()">
  <table>
    <tr>
      <td>
        <select onchange="onClick1()">
          <option value="" disabled selected>Title</option>
          <option value="clean">Clean</option>
          <option value="salvage">Salvage</option>
          <option value="rebuilt">Rebuilt</option>
        </select>
      </td>
      <td>
        <select id="t1" onchange="onClick2()">
          <option value="" disabled selected>Title Status</option>
          <option value="in hand">In Hand</option>
          <option value="lien">Lien</option>
          <option value="missing">Missing</option>
        </select>
      </td>
      <td>
        <select id="t2">
          <option value="" disabled selected>Title Stat</option>
          <option value="in hand">In Hand</option>
          <option value="lien">Lien</option>
          <option value="missing">Missing</option>
          <option value="ralph jr.">Missing</option>
          <option value="ralph">Missing</option>
        </select>
      </td>
    </tr>
  </table>

Answer 4

Generic approach

• Set an array with the <select> id's.
• Create a function that shows the next <select>. Use classList.hide() in the function.
• Append the function to every <select>.

Example

var ids = ["t1", "t2", "t3", "t4"];

function El(id) {
  return document.getElementById(id);
}

function showNext(ids, id) {
  var i = ids.indexOf(id);
  // If i is not the last one
  if (i !== ids.length - 1) {
    var el = El(ids[i + 1]);
    // Remove CSS class 'hide'
    el.classList.remove("hide");
  }
}

function init() {
  // Add an event listener to each element.
  for (var i = 0; i < ids.length; i += 1) {
    var el = El(ids[i]);
    el.addEventListener("change", function() {
      // Show next element from current
      showNext(ids, this.id);
    });
  }
}

init();

.hide {
  display: none;
}

<table>
  <tr>
    <td>
      <select id="t1">
        <option value="" disabled selected>Title</option>
        <option value="clean">Clean</option>
        <option value="salvage">Salvage</option>
        <option value="rebuilt">Rebuilt</option>
      </select>
    </td>
    <td>
      <select id="t2" class="hide">
        <option value="" disabled selected>Title Status</option>
        <option value="in hand">In Hand</option>
        <option value="lien">Lien</option>
        <option value="missing">Missing</option>
      </select>
    </td>
    <td>
      <select id="t3" class="hide">
        <option value="" disabled selected>Title Stat</option>
        <option value="in hand">In Hand</option>
        <option value="lien">Lien</option>
        <option value="missing">Missing</option>
        <option value="ralph jr.">Missing</option>
        <option value="ralph">Missing</option>
      </select>
    </td>
    <td>
      <select id="t4" class="hide">
        <option value="" disabled selected>Title Stat</option>
        <option value="in hand">In Hand</option>
        <option value="lien">Lien</option>
        <option value="missing">Missing</option>
        <option value="ralph jr.">Missing</option>
        <option value="ralph">Missing</option>
      </select>
    </td>
  </tr>
</table>