Question

我正在尝试创建JavaScript函数，因此在下拉菜单中选择任何选项时，将显示下一个下拉菜单。我将此功能添加到每个选项值中，因此，如果要选择任何选项，则会出现下一个下拉菜单-我追求的功能。但是，当用户从下拉列表中进行选择时，什么也不会发生。任何帮助，将不胜感激。

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

尝试使用onchange代替onclick。您可以在下面查看。

<!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

在大多数版本的IE，Safari和Chrome上，onclick标签上的

option事件将失败：

从选项中删除onClick。应通过选择框上的onChange事件来处理。

如果要传递所选选项的值，则只需传递 this.value

尝试一下

<!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

向每个选项中添加onchange事件处理程序以选择标签，而不是onclick

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

通用方法

使用<select> id 设置数组。
创建一个显示下一个<select>的函数。在函数中使用classList。hide（）。
将该功能附加到每个<select>。

示例

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>

显示下一个下拉列表

4 个答案:

通用方法

示例