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

jjhzyzn0 于 2023-03-17 发布在 jQuery

关注(0)|答案(2)|浏览(165)

我现在有一个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与我想要的类似，只是答案是禁用选项，而我想要隐藏选项。

jquery

来源：https://stackoverflow.com/questions/52725670/how-to-hide-a-selectize-option-programmatically

2条答案

按热度按时间

uplii1fm1#

除了从初始化selectize控件时创建的options数组中删除selectize选项之外，我不知道还有什么方法可以“隐藏”selectize选项（使用display 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">
    <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元素中的可用选项，下面的代码片段将在javascript而不是html中初始化选项。
一个二个一个一个

赞(0）回复(0）举报 2023-03-17

gev0vcfq2#

我有同样的任务-隐藏或删除一些选定的选项。@benvc解决方案对我很有效，但它显示一个下拉菜单，就像它被按下一样。

改进版本：

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

说明：

正如文档所述，它有一个布尔参数triggerDropdown：
刷新选项（触发器下拉列表）
...
触发器下拉布尔值
https://selectize.dev/docs/API/selectize#refreshoptionstriggerdropdown
将其设置为false可以防止下拉菜单出现，即使没有refreshOptions（）调用也可以工作，但我决定保留它。

赞(0）回复(0）举报 2023-03-17

我来回答

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

2条答案

相关问题

热门标签

最新问答