使用 jQuery Chosen 时隐藏 select 列表选项值

Question

我创建了一个简单的应用程序，其中包含 <select> 列表，其中 hide() 或 show() 选项值基于之前的选择。

有两个列表，一个包含车辆品牌，另一个包含车辆型号。 When a certain Make is selected, i.e. BMW, the next Make <select> appears only showing BMW models.反之亦然，奥迪等等。

在 Models 列表中，我为每个 <option> 值附加了一个 ID，并根据之前的选择显示或隐藏这些 <option> 值。例如选择BMW，就会隐藏奥迪<option>'s、Q1和Q3这两个车型。如果选择Audi，它会隐藏两个BMW车型<option>'s，X1和X2。

我成功实现了这个基本功能；但是，当我整合 jQuery 的 Chosen 时，它不再起作用了。我真的很喜欢 Chosen，一旦我构建了这个应用程序，它将非常有用，所以我很乐意通过集成实现相同的功能。

这是简单的代码文件：

<!DOCTYPE html>
<html>
<head>
 <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">
 <style type="text/css">
  .chosen-select {width:200px}
  .hidden {display: none;}
 </style>
 <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 type="text/javascript">
  $(document).ready(function() {
   var $models = $('#s2');
   var $drivetrain = $('#s3');
   var $bmwmodels = $('#X1, #X2');
   var $audimodels = $('#Q1, #Q3');
   $('#s1').change(function() {
    var selectedValue = $(this).val();
    if(selectedValue  == 'BMW') {
     $audimodels.hide();
     $drivetrain.parent().hide();
     $models.parent().show();
     $bmwmodels.show();
    } 
    else if (selectedValue == 'AUDI') {
     $bmwmodels.hide();
     $drivetrain.parent().hide();
     $models.parent().show();
     $audimodels.show();
    }
    else {
     $bmwmodels.hide();
     $audimodels.hide();
     $models.parent().hide();
     $drivetrain.parent().hide();
    }
   });
   //Hide onload
   function hide() {
    $models.parent().hide();
    $drivetrain.parent().hide();
    $bmwmodels.hide();
    $audimodels.hide();
   }
   // call hide AFTER .chosen() has been invoked on the visible elements
   hide();
  });
 </script>
</head>
<body onload="hide()">
<table>
 <tr>
  <td>
   <select data-placeholder="Select Brand" class="chosen-select" id="s1">
    <option disabled selected></option>
    <option value="BMW">BMW</option>
    <option value="AUDI">AUDI</option>
    <option value="nothing" id="nothing">Nothing</option>
   </select>
  </td>
 </tr>
 <tr>
  <td>
   <select data-placeholder="Select Model" class="chosen-select" id="s2">
    <option disabled selected></option>
    <option value="nothing" id="nothing">Nothing</option>
    <option value="X1" id="X1">X1</option>
    <option value="X2" id="X2">X2</option>
    <option value="Q1" id="Q1">Q1</option>
    <option value="Q3" id="Q3">Q3</option>
   </select>
  </td>
 </tr>
</table>
</body>
</html>

如有任何帮助，我们将不胜感激！非常感谢。

Answer 1

$(".chosen-select").trigger('chosen:updated'); 您需要通知 Chosen 您的选项已更新。此代码更新了 Chosen 以处理更新的选项。

有一点要注意，但是删除 pre-select 不起作用，您需要在 Chosen 中找到有关如何删除 pre-selection 的解决方案。

$(document).ready(function() {

  var $models = $('#s2');
  var $drivetrain = $('#s3');

  var $bmwmodels = $('#X1, #X2');
  var $audimodels = $('#Q1, #Q3');

  console.log( $bmwmodels, $audimodels);
  $('#s1').change(function() {
    var selectedValue = $(this).val();

    if (selectedValue == 'BMW') {
      $audimodels.hide();
      $drivetrain.parent().hide();
      $models.parent().show();
      $bmwmodels.show();
    } else if (selectedValue == 'AUDI') {
      $bmwmodels.hide();
      $drivetrain.parent().hide();
      $models.parent().show();
      $audimodels.show();
    } else {
      $bmwmodels.hide();
      $audimodels.hide();
      $models.parent().hide();
      $drivetrain.parent().hide();
    }
    
     $(".chosen-select").trigger('chosen:updated');
  });


  //Hide onload
  function hide() {
    $models.parent().hide();
    $drivetrain.parent().hide();
    $bmwmodels.hide();
    $audimodels.hide();
  }
  
  // call hide AFTER .chosen() has been invoked on the visible elements
  $(".chosen-select").chosen({
    disable_search_threshold: 4
  });

  hide();

});

.chosen-select {
  width: 200px
}

.hidden {
  display: none;
}

<!DOCTYPE html>
<html>

<head>
  <title>Test</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>
</head>

<body>

  <table>
    <tr>
      <td>
        <select data-placeholder="Select Brand" class="chosen-select" id="s1">
          <option disabled selected></option>
          <option value="BMW">BMW</option>
          <option value="AUDI">AUDI</option>
          <option value="nothing" id="nothing">Nothing</option>
        </select>
      </td>
    </tr>

    <tr>
      <td>
        <select data-placeholder="Select Model" class="chosen-select" id="s2">
          <option disabled selected></option>
          <option value="nothing" id="nothing">Nothing</option>
          <option value="X1" id="X1">X1</option>
          <option value="X2" id="X2">X2</option>
          <option value="Q1" id="Q1">Q1</option>
          <option value="Q3" id="Q3">Q3</option>
        </select>
      </td>
    </tr>

  </table>

</body>

</html>

使用 jQuery Chosen 时隐藏 select 列表选项值

Hiding select list option values while using jQuery Chosen

html

javascript

jquery

jquery-chosen