Избранные и если заявления - PullRequest
Новая
       11

Избранные и если заявления

0 голосов
/ 05 июля 2018

Я интегрировал Chosen в три моих выпадающих меню. Я создал функцию, поэтому, если в первом раскрывающемся списке делается какой-либо выбор, появляется второй раскрывающийся список. Затем, если сделан какой-либо выбор во втором раскрывающемся списке, появляется третий.

Я хочу изменить свой код так, чтобы следующий конкретный список вызывал только определенный выбор. Например, если «чистый» - это значение, выбранное в первом раскрывающемся списке, то появится второе. Таким образом, я хочу изменить триггер с любого значения на конкретное значение. Как бы я поступил так? Большое спасибо! 

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

Ответы [ 3 ]

0 голосов
/ 05 июля 2018

Вот как вы можете это сделать, проверив значение select в событии change для первого выбора. 

$(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>
0 голосов
/ 05 июля 2018

использовать выбранную функцию изменения 

<!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>
0 голосов
/ 05 июля 2018

Просто используйте 

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

в вашей функции onSelect

...