如何以编程方式隐藏选择选项？

Question

我目前有一个选择下拉菜单，假设根据我拥有的字符串列表禁用和隐藏其中的一些选项。这是我尝试过的非选择 javascript 函数：

<!DOCTYPE html>
<html>

<body>

  <select onchange="ToggleSelectizeOptions(this.value)">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
    <option value="ford">Ford</option>
    <option value="hyundai">Hyundai</option>
    <option value="honda">Honda</option>
    <option value="porsche">Porsche</option>
  </select>

  <select id="selectize">
    <option value="">All Vehicles</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
    <option value="ford">Ford</option>
    <option value="hyundai">Hyundai</option>
    <option value="honda">Honda</option>
    <option value="porsche">Porsche</option>
  </select>

  <script>
    function ToggleSelectizeOptions(ids) {
      var selectizeOptions = document.getElementById("selectize").options;
      var selectizeSingleOption;

      //We always start at 1 because index 0 always have "" as the value.
      for (var idx = 1; idx < selectizeOptions.length; idx++) {
        selectizeSingleOption = selectizeOptions[idx];
        if (ids) {
          if (ids.includes(selectizeSingleOption.value)) {
            selectizeSingleOption.style.display = "";
          } else {
            selectizeSingleOption.style.display = "none";
          }
        } else {
          selectizeSingleOption.style.display = "";
        }
      }
    }
  </script>

</body>

</html>

这适用于不是选择控件的下拉菜单，但我正在寻找一种可以使用 selectize.js 做同样事情的解决方案。

我看到this question 与我想要的类似，只是答案禁用了该选项，而我想隐藏该选项。

Answer 1

除了简单地将它们从初始化选择控件时创建的options 数组中删除之外，我不知道有一种方法可以“隐藏”选择选项（使用显示 css 或其他方式）。如果这就是您需要做的全部，那么您可以使用 selectize removeOption(value) 方法删除选择选项（请参阅下面的工作 sn-p 示例）。

根据您的代码示例，您的最终目标似乎是创建级联下拉菜单。如果是这样，请参阅下面的第二个 sn-p 示例。

const sel1 = $('#select1').selectize();
sel1[0].selectize.removeOption('ford');
sel1[0].selectize.refreshOptions();

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Selectize</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
  </head>
  <body>
    <select id="select1">
      <option value="ford">Ford</option>
      <option value="honda">Honda</option>
    </select>
  </body>
</html>

如果您的最终目标是创建级联下拉列表，其中第一个 select 元素中选择的值决定了第二个 select 元素中可用的选项。下面的 sn-p 初始化 javascript 中的选项，而不是 html。

const models = [{text: 'Models', value: ''}];
const makes = [
  {text: 'Makes', value: ''},
  {text: 'Ford', value: 'ford'},
  {text: 'Honda', value: 'honda'}
];

const modelsByMake = {
  ford: [
    {text: 'Explorer', value: 'explorer'},
    {text: 'Expedition', value: 'expedition'}
  ],
  honda: [
    {text: 'Civic', value: 'civic'},
    {text: 'Accord', value: 'accord'}
  ]
};

const sel2 = $('#select2').selectize({
  options: models,
  items: [''],
  valueField: 'value',
  labelField: 'text',
  sortField: 'value',
  searchField: ['text'],
  load: (query, callback) => {
    let options = [];
    $.each(modelsByMake, (i, v) => {
      options = options.concat(v);
    });
    
    callback(options);
  },
  preload: true
});

const sel1 = $('#select1').selectize({
  options: makes,
  items: [''],
  valueField: 'value',
  labelField: 'text',
  sortField: 'value',
  searchField: ['text'],
  onChange: (value) => {
    let options = models;
    if (value) {
      // get models for selected make
      options = options.concat(modelsByMake[value]);
    } else {
      // get all models
      $.each(modelsByMake, (i, v) => {
         options = options.concat(v);
      });
    }
    
    sel2[0].selectize.clear(); // clear sel2 selected items
    sel2[0].selectize.clearOptions(); // clear sel2 options
    
    // load options corresponding to sel1 value in sel2
    sel2[0].selectize.load((callback) => {
      callback(options);
    });
    
    // refresh sel2 options list
    sel2[0].selectize.refreshOptions();
  }
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Selectize</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
  </head>
  <body>
    <select id="select1"></select>
    <select id="select2"></select>
  </body>
</html>