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

Question

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

Joh*_*dom 3 html javascript jquery html-select selectize.js

我目前有一个选择下拉菜单，其中的一些选项应该根据我拥有的字符串列表被禁用和隐藏。这是我尝试过的非选择 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>

Run Code Online (Sandbox Code Playgroud)

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

我看到这个问题与我想要的类似，除了答案在我想隐藏该选项时禁用该选项。

Answer 1

ben*_*nvc 5

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

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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

如果您的最终目标是创建级联下拉列表，其中第一个select元素中选择的值决定第二个元素中可用的选项select。下面的代码片段在 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();
  }
});

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，3 月前
查看次数：	5697 次
最近记录：	2 年，10 月前