Question

我设计了两个表，第一个没有选择的表，第二个没有选择的表。第一张表正是我希望第二张起作用的方式。用户在第一个下拉列表中进行选择，然后出现第二个下拉列表。然后，用户在第二个下拉列表中进行选择，第三个出现。

我在第一个表和第二个表中使用了相同的功能，第二个表中唯一的增加是将Chosen类添加到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
      });
    });
  </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>元素，因此不再触发您的点击处理程序。您需要设置点击处理程序并显示/隐藏<select>的父级，因为.chosen()将<div>结构放置在<td>的结尾成为新的选择列表。这是完成此操作的方法：

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

1 个答案: