Javascript 函数不适用于 Chosen 插件

Question

我设计了两个 tables，第一个没有选择，第二个有选择。第一个 table 正是我希望第二个发挥作用的方式。用户在第一个下拉列表中创建 selection，然后出现第二个下拉列表。然后用户在第二个下拉列表中创建 selection，然后出现第三个。

我在第一个 table 和第二个 table 中使用了相同的功能，对第二个的唯一添加是将 Chosen class 添加到 select 标签.为什么选择的下拉菜单没有隐藏？另外，为什么函数处理不像第一个 table 那样，在前一个 selection 完成后显示下一个下拉菜单？就像我说的，我希望两个 table 功能相同，第二个只是使用选择格式。非常感谢！

<!DOCTYPE html>
<html>

<head>
  <title>Experiment</title>

  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

  <script type="text/javascript">
    $(function() {
      $(".chosen-select").chosen({
        disable_search_threshold: 4
      });
    });
  </script>

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

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

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

  function onSelect1(){
    document.getElementById("p1").style.display = "block";
  }

  function onSelect2(){
    document.getElementById("p2").style.display = "block";
  }
</script>


  <style type="text/css">

  </style>
</head>

<body onload="hide()">
  <table>
    <tr>
      <td>
        <select onclick="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" onclick="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>

  <table>
    <tr>
      <td>
        <select  class="chosen-select" onclick="onSelect1()">
          <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 class="chosen-select" id="p1" onclick="onSelect2()">
          <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 class="chosen-select" id="p2">
          <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 1

您在调用 .chosen() 之前隐藏了元素。这可能会导致几个 UI 库出现问题（即 jQueryUI 按钮，在您选择的情况下也是如此）。让 .chosen() 运行、然后调用 hide() 并且你不会有任何问题（风格上）。

在功能上，这里的另一个问题是 .chosen() 隐藏了 <select> 元素，因此您的点击处理程序不再被触发。您需要设置点击处理程序和 show/hide <select> 的 parent 因为 .chosen() 在 <td> 最终成为新的 select 列表。完成此操作的方法如下：

<!DOCTYPE html>
<html>

<head>
  <title>Experiment</title>

  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

  <script type="text/javascript">
    $(function() {
      $(".chosen-select").chosen({
        disable_search_threshold: 4
      });
      function hide() {
        $("#p1").parent().hide();
        $("#p2").parent().hide();
      }
      // call hide AFTER .chosen() has been invoked on the visible elements
      hide();
    });
  </script>

<script>

  function onSelect1(){
    $("#p1").parent().show();
  }

  function onSelect2(){
    $("#p2").parent().show();
  }
</script>


  <style type="text/css">

  </style>
</head>
<!-- Do not call hide() on body load -->
<body>
  <table>
    <tr>
      <td onclick="onSelect1()">
        <select  class="chosen-select">
          <option value="" disabled selected>Title</option>
          <option value="clean">Clean</option>
          <option value="salvage">Salvage</option>
          <option value="rebuilt">Rebuilt</option>
        </select>
      </td>
      <td onclick="onSelect2()">
        <select class="chosen-select" id="p1" >
          <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 class="chosen-select" id="p2">
          <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>

Javascript 函数不适用于 Chosen 插件

Javascript function not working with Chosen plugin

html

javascript

jquery

jquery-chosen