Функция Javascript не работает с плагином Chosen - PullRequest
Новая
       9

Функция Javascript не работает с плагином Chosen

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

Я разработал две таблицы: первая без Выбранного и вторая с Избранным. Первая таблица - именно то, как я хочу, чтобы вторая функционировала. Пользователь делает выбор в первом раскрывающемся списке, и появляется второй раскрывающийся список. Затем пользователь делает выбор в пределах второго раскрывающегося списка, и появляется третий.

Я использовал те же функции в первой и второй таблицах, единственным дополнением ко второй было добавление класса 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>

1 Ответ

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

Вы прячете элементы, прежде чем вызывать .chosen() на них. Это может вызвать проблемы с несколькими библиотеками пользовательского интерфейса (т.е. кнопками 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>
...