如何使用 Selectize.js 以编程方式使特定选项不可选择?

2023-12-19

我有一个包含多个选项的选择,我尝试以编程方式使某些选项不可选择。例如,我的代码是:

<select>
  <option value="1">Value 1</option>
  <option value="2">Value 2</option>
  <option value="3">Value 3</option>
</select>
<script>
  $('select').selectize();
</script>

我的问题是:如何以编程方式禁用选项“2”(即不显示且不可选择)? -- 我尝试过这段代码...

$('select')[0].selectize.$dropdown_content.find('[data-value="2"]').removeAttr('data-selectable');

...但它不起作用(当我检查 DOM 时,我看到选项“2”没有“数据可选择”属性,但它仍然呈现并且可以选择...)。

我这里错了吗?如果是这样:使选项不可选择的正确方法是什么(我在文档中找不到它)?

(我在这里创建了一个jsFiddle:http://jsfiddle.net/j8YUA/3/ http://jsfiddle.net/j8YUA/3/)


您可以使用disabledField https://github.com/selectize/selectize.js/blob/master/docs/usage.md#data_searching设置在渲染选项时以编程方式使选择选项“不可选择”。您还可以在事后使用以下命令使选项“不可选择”updateOption https://github.com/selectize/selectize.js/blob/master/docs/api.md#methods_options方法(或者您可以简单地使用removeOption https://github.com/selectize/selectize.js/blob/master/docs/api.md#methods_options方法)例如:

const options = [
  {name: 'Option 1', disable: false},
  {name: 'Option 2', disable: true}
  ];

const sel = $('#select1').selectize({
  options: options,
  valueField: 'name',
  labelField: 'name',
  searchField: ['name'],
  disabledField: 'disable'
});

$('#button1').click(() => {
  sel[0].selectize.updateOption('Option 1', {name: 'Option 1', disable: true});
});

$('#button2').click(() => {
  sel[0].selectize.removeOption('Option 2');
});
<!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>

    <div>Option 2 disabled</div>
    <input id="select1" name="select1" type="text" />
    <button id="button1">Disable Option 1</button>
    <button id="button2">Remove Option 2</button>
    
    <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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Selectize.js 以编程方式使特定选项不可选择? 的相关文章

  • 如何使用 CSS 将 div 置于表格中心?

    我正在尝试向我的网站之一添加幻灯片 整个页面布局在一个 HTML 表格中 我非常讨厌它并且没有选择 我想将我的幻灯片放在该特定列的中心 我的 CSS 如下所示 slideshow position relative slideshow IM
  • Bootstrap:下拉菜单无法通过 jQuery 单击打开

    我正在创建一个包含多行的表 所有行都有一个 选项 按钮 该按钮应该显示下拉上下文菜单 为了使代码更短 我使用了一个div以便将其重用为上下文菜单的通用标记 我正在使用 Bootstrap 5 1 3 和 jQuery 3 6 0 以下是我的
  • 如何用 jQuery 替换击键?

    我需要能够用 jQuery 替换击键 当按下右箭头时 我希望改为按下 Tab 键 到目前为止我有
  • 在外部单击时关闭弹出 div

    我有一个弹出 div 仅在单击特定按钮时显示 单击同一按钮时它甚至会隐藏 我的问题是 我还想在单击外部任何地方时隐藏 div 我无法这样做 因为弹出 div 位于主包装类内部 并且无法通过在包装类上使用 click 事件并使其隐藏来做到这一
  • Google 地图 v3 中标准缩放控件的样式

    有没有一种简单的方法可以在 Google Maps JavaScript API v3 中设置缩放控件的样式 我想要的只是改变标准图像 http maps gstatic com intl en ALL mapfiles mapcontro
  • 单击react.js 切换列表的背景颜色

    我正在尝试创建一个具有以下功能的列表 悬停时更改列表项的背景颜色 单击时更改列表项的背景颜色 在单击的元素之间切换背景颜色 即列表中只有一个元素可以具有 clicked 属性 我已经执行了 onhover 1 和 2 功能 但无法实现第三个
  • 在浏览器上录制视频并上传到LAMP服务器

    我已经尝试了很多东西 red5 jquery 网络摄像头 html5 但这些解决方案都没有录制视频并准备好上传到服务器 无论如何 html5 flash 等等 更好的跨浏览器解决方案 最好的 上传视频 音频 并将结果上传到服务器 我猜是通过
  • 响应式菜单:悬停子菜单显示错误

    简而言之 我根据教程创建了一个响应式菜单 当您将鼠标悬停在投资组合按钮上时 菜单应该显示子菜单 而在移动模式下 您需要按该按钮才能显示子菜单 效果很好 问题是该教程有一个错误 如果您在桌面模式下按组合按钮 子菜单将不会再次显示 除非您按 单
  • 我如何使用 jQuery 来 ajaxify 表单?

    我正在尝试在不使用 jQuery 插件的情况下 AJAXIFY 表单 实现这一目标的过程是什么 我有我的表格 我应该将操作设置为什么 标题脚本应该是什么 请记住 我不想使用任何插件 我只需要一个使用 jquery ajaxifying 表单
  • jQuery 仅匹配 div 中的部分 id

    昨天晚上我遇到了一个不寻常的情况 我只需要匹配 id 的一部分 让我用一个例子来让大家明白 我有几个像这样的div div div div div div div jQuery 就像 jQuery div dont know what to
  • 访客客户检查 Woocommerce 订单账单电子邮件时可享受首单折扣

    通过对照正在处理和已完成的订单检查来宾客户的电子邮件地址 如果电子邮件没有订单 我想给来宾 首单折扣 如果这能在客人输入电子邮件时发生 那就太好了 我想我已经成功制作了折扣代码 现在我请求帮助合并这两个代码 使其一切正常 这是折扣代码 ad
  • 如何在 jQuery 中使用 CSS“background-image”属性添加的图像上绑定单击事件

    这是我的小提琴link http jsbin com otisur 1 edit 我想我的问题通过标题本身就很清楚了 尽管如此 我正在寻找一种绑定的方法click使用 css 添加的图像上的事件background image财产 我知道
  • JavaScript:参数列表后缺少 )

    这个 JavaScript 产生一个错误 参数列表后缺少 在 firebug 中使用代码 我究竟做错了什么 功能d缺少左括号 answer after 不应该逃避 只需常规报价即可
  • 有什么方法可以在不重新加载的情况下更改标头 URL? [复制]

    这个问题在这里已经有答案了 可能的重复 修改URL而不重新加载页面 https stackoverflow com questions 824349 modify the url without reloading the page 使用新
  • 使用 jQuery 拖放

    我想使用 jQuery 进行简单的拖放操作 到目前为止我还没有做任何事情 但之前的尝试都没有成功 你有没有尝试过jQuery UI 可拖动 http jqueryui com demos draggable 简单用例 div class u
  • 使用 jQuery 解析无效的 HTML,而不添加到 DOM?

    我正在开发一个使用 HTML 模板的 jQuery 插件 最终用户可以传入一个最简单级别的模板 如下所示
  • 附加元素在 IE11 中不起作用

    在构造函数中我创建一个元素 var this legendElement this compileLegend 后来我想在事件监听器中使用它 var takeControl function this element empty this
  • Jquery获取每个div的子子div并将信息抓取到数组中

    我有一些看起来像这样的 html div div class sub main div div
  • jQuery - 未捕获类型错误:对象 # 没有方法“parent”

    我的代码有问题 Chrome代码光谱仪说第21行有问题 问题如下 Uncaught TypeError Object
  • 右列固定的 Div 表

    我最近接手了一个非营利网站作为一个项目 我正在使用一个现有的网站 所以我必须使用很多已经编程的东西 所以我所要做的就是创建设计 I made a diagram of basically what I can t figure out ho

随机推荐