代码之家 › 专栏 › 技术社区 › John Odom

如何以编程方式隐藏selectize选项?

selectize.js html-select html jquery javascript

1

John Odom · 技术社区 · 8 年前

我现在有一个selectize下拉列表,其中的一些选项被禁用和隐藏,具体取决于我拥有的字符串列表。下面是我尝试的非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 这与我想要的相似,只是答案禁用了选项,而我想隐藏选项。

1 回复 | 直到 8 年前

1

2

benvc 8 年前

options 初始化selectize控件时创建的数组。如果您只需要这样做,那么可以使用selectize删除selectize选项 removeOption(value)

根据您的代码示例,您的最终目标似乎是创建级联下拉列表。如果是这样,请参见下面的第二个代码段以获取示例。

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 选择

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>