选择和 If 语句

Question

我将 Chosen 集成到我的三个下拉列表中。我创建了一个函数，因此如果在第一个下拉列表中进行了任何选择，则会出现第二个下拉列表。然后，如果在第二个下拉列表中进行了任何选择，则会出现第三个。

我想更改我的代码，以便只有特定的选择才会触发下一个下拉菜单出现。例如，如果 "clean" 是第一个下拉列表中选择的值，则第二个将出现。总之，我想将触发器从任何值更改为特定值。我该怎么做呢？非常感谢！

<!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">
    .chosen-select {
      width: 200px
    }
  </style>
</head>
<!-- Do not call hide() on body load -->
<body>
  <table>
    <tr>
      <td onchange="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 onchange="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>

Answer 1

只需使用

function onSelect1(){
  if ($("#p1").value() == 'whatever')
       $("#p1").parent().show();
}

在你的 onSelect 函数中

Answer 2

您可以通过检查第一个 selection 的 change 事件的 select 值来实现。

$(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();
});

function onSelect1(event) {
  if (event.target.value === "clean")
    $("#p1").parent().show();

}

function onSelect2() {
  $("#p2").parent().show();
}

$("#select1").on('change', onSelect1);

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

  <style type="text/css">
    .chosen-select {
      width: 200px
    }
  </style>
</head>
<!-- Do not call hide() on body load -->

<body>
  <table>
    <tr>
      <td id="select1">
        <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 onchange="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>

Answer 3

使用选择的更改功能

<!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
      });
      
       $("#p0").chosen().change(function(){
        if ($(this).val() === 'clean'){
          $("#p1").parent().show();
        }
    });
      
      
      function hide() {
        $("#p1").parent().hide();
        $("#p2").parent().hide();
      }
      // call hide AFTER .chosen() has been invoked on the visible elements
      hide();
        
    });
  </script>

<script>

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


  <style type="text/css">
  .chosen-select {width:200px}
  </style>
</head>
<!-- Do not call hide() on body load -->
<body>
  <table>
    <tr>
      <td>
        <select  class="chosen-select" id="p0">
          <option value="" disabled selected>Title</option>
          <option value="clean">Clean</option>
          <option value="salvage">Salvage</option>
          <option value="rebuilt">Rebuilt</option>
        </select>
      </td>
      <td onchange="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>

选择和 If 语句

Chosen and If Statements

html

javascript

jquery

jquery-chosen