Question

我目前有一个selectize下拉菜单，该下拉菜单中有一些选项被禁用和隐藏，具体取决于我拥有的字符串列表。这是我尝试的非选择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控件的下拉菜单，但我正在寻找一种可以使用selectize.js来完成相同操作的解决方案。

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

Answer 1

除了将其从初始化选择控件时创建的options数组中删除，我不知道“隐藏”选择选项（使用显示CSS或其他方法）的方法。如果这是您需要做的所有事情，则可以使用selectize removeOption(value)方法删除selectize选项（有关示例，请参见下面的工作片段）。

根据您的代码示例，您的最终目标似乎是创建级联下拉菜单。如果是这样，请参见下面的第二个片段作为示例。

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">
</head>

<body>

  <select id="select1">
    <option value="ford">Ford</option>
    <option value="honda">Honda</option>
  </select>

  <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>

</body>

</html>

如果您的最终目标是创建级联下拉菜单，则在第一个select元素中选择的值将确定在第二个select元素中可用的选项。下面的代码段初始化了javascript中的选项，而不是html中的选项。

const makes = [
  {text: 'Makes', value: ''},
  {text: 'Ford', value: 'ford'},
  {text: 'Honda', value: 'honda'}
];
  
const models = [{text: 'Models', value: ''}];

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">
</head>

<body>

  <select id="select1"></select>
  <select id="select2"></select>

  <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>

</body>

</html>

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

1 个答案: