创建一个项目(如果 Selectize.js 选择框中尚不存在)并使用 ajax 更新新添加的项目

2023-12-20

我正在使用选择.js https://github.com/brianreavis/selectize.js在选择框中,我需要的是,如果某个项目不在选项列表中,我需要添加一个新项目。添加新项目时,我想要一个 ajax 调用来将新添加的项目更新到我的数据库中。

在他们的文档 https://github.com/brianreavis/selectize.js/blob/master/docs/usage.md,它说我们可以使用“create”来选择添加项目。

创建 - 允许用户创建不在选项列表中的新项目。此选项可以是以下任意值:“true”(默认行为)、“false”(禁用)或接受两个参数的函数:“input”和“callback”。应使用选项的最终数据调用回调。

但我无法理解如何使用此处的回调。有人可以帮忙吗?

以下是我的内容示例,值是数据库中项目的 id。我希望将新项目添加到数据库中,并返回数据库中的 id 值,并填充并在选择框中选择。

<select name="fruits" id="fruits" placeholder="Select a fruit" >
    <option value="1">Apple</option>
    <option value="2">Orange</option>
    <option value="3">Mango</option>
    <option value="4">Grape</option>
</select>

<script>
    $(function(){
        $('#fruits').selectize({
            create:function (input, callback){

           }
        });
    });
</script>

实际上,您必须返回一个具有与 labelField 和 valueField 选项名称匹配的属性的对象:

<script>
    $(function(){
        $('#fruits').selectize({
            create:function (input){
               return { value:123, text:input};
           }
        });
    });
</script>

如果您需要执行远程操作,您可以像这样编写代码:

<script>
    $(function(){
        $('#fruits').selectize({
            create:function (input, callback){
                $.ajax({
                    url: '/remote-url/',
                    type: 'GET',
                    success: function (result) {
                        if (result) {
                            callback({ value: result.id, text: input });
                        }
                    }
                });
            }
        });
    });
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

创建一个项目(如果 Selectize.js 选择框中尚不存在)并使用 ajax 更新新添加的项目 的相关文章

  • 仅支持以下协议方案的跨源请求:http

    这是一个常见的 JavaScript 问题 但它在使用 Splunk JavaScript SDK 的代码中弹出 错误是 XMLHttpRequest 无法加载 file C proxy services auth login output
  • 如何获取输入元素上的 TAB 键事件?

    我尝试在输入字段中按下返回键时触发按钮 这有效 但是 如果我按 Tab 键 则不会触发任何内容 因为未捕获 TAB 键事件 小提琴示例 http jsfiddle net a08t4o7r 例如 这是我的 JQ 代码片段 input nam
  • 如何针对 IE 进行优化?

    我有一个 JS 密集型应用程序 它在 IE 中运行缓慢 我将花费大约一周的时间来优化 IE 并且我想要一些关于尝试的方向 我发现这个线程引用Drip https ieleak svn sourceforge net svnroot iele
  • 使用 jquery 更改锚文本和图标

    我有一个隐藏或显示 div 的锚标记 但我无法更改它的文本和图标 如何更改文本和图标标签 因为目前它将图标标签解析为常规文本 锚标记 a class collapse info btn i class icon arrow up icon
  • 使用淘汰赛动态显示/隐藏元素

    我有一个表 有四列 即代码 名称 数量和价格 其中 我想动态更改数量列的内容 元素 通常 它应该显示其中显示数量的元素 当用户单击元素时 我想显示该元素 以便用户可以编辑数量 我正在尝试按照 示例2 来实现淘汰赛文档链接 http knoc
  • Firefox 上的 jquery 焦点未设置

    我想将焦点设置到我的文本区域 以下是我的代码 this textInput val show focus 但它不起作用 实际上 当我按下鼠标按钮时 它会出现 但是当我松开鼠标时 它会从文本区域中删除 因此 经过大量搜索后 我发现 setTi
  • 如何在使用类型分散时将箭头添加到行尾

    如何在 y 不等于 0 且系列类型以线宽 2 分散的情况下正确地将箭头添加到行的每一端 在这里我可以看到箭头已添加但未正确添加 请看这个 部分工作小提琴 http jsfiddle net vnYCX 这是我的 JS 最初的原型是由 sta
  • Jquery Ajax 调用返回 403 状态

    我有一个 jquery Ajax 调用来实现会话的 keepalive 这个 keepAlive 方法将每 20 分钟调用一次 function keepAlive ajax type POST url KeepAliveDummy asp
  • Fancybox 只能水平响应高内容吗?

    我有一个网站 其中有一些非常高的图像 我希望这些图像能够以响应方式水平响应 但不能垂直响应 如果它们符合浏览器的高度 它们就会变得太小而无法正确查看 有没有一种简单的方法可以实现我所缺少的 请参阅下面的示例 单击第二个缩略图 bswift
  • DataTables:从表过滤器中创建 url 查询字符串

    当我在表中搜索或单击过滤器时 我想从表中进行 url 查询以将此 url 共享给某人 有人知道这怎么可能吗 这是我的代码 example dataTable aLengthMenu 10 25 50 100 1 10 25 50 100 A
  • 如何将 Ajax 与 jQuery 结合使用

    function ajaxFunction var ajaxRequest The variable that makes Ajax possible try Opera 8 0 Firefox Safari ajaxRequest new
  • jquery html() 默认解码 html 实体?

    我不知道为什么 jquery html 会这样做 但是在我这样做之后 html html 我得到 copy 自动转换为 无论如何要避免这种情况 我需要使用 javascript 转储页面的 html 并且不需要这种破坏 html 的无用转换
  • 根据所选选项更改表数据

    我有一个表显示数据库中的数据 我有一个选择框 人们可以在其中选择他想要显示数据的货币 当他这样做时 我需要刷新数据并显示为新货币 我不知道如何在不刷新整个页面的情况下做到这一点 有什么想法吗
  • onYouTubeIframeAPIReady 函数未调用

    我想打电话onYouTubeIframeAPIReady函数 但这没有触发 我只得到frameID在控制台中 但其他函数没有被调用 document ready function var player var ytsrc video hol
  • Excel Add In - console.log 在哪里输出它的消息 - NodeJS

    我正在尝试使用 JavaScript API 创建 Excel 插件 但我不明白 console log 在哪里输出它们的消息 所有 Microsoft 文档都包含 console log 示例 但没有解释 console log 输出消息
  • 区分单击与 mousedown/mouseup

    我已经阅读了有关这种情况的 stackoverflow 上的几个答案 但没有一个解决方案有效 我尝试根据用户是否单击某个元素或使用 jQuery 将鼠标按住该元素来执行不同的操作 有可能做到这一点吗 onMouseDown 将在按下左侧或右
  • 代码点火器 JSON

    你好 我使用 codeigniter 然后我从控制器中的数据库中回显输出 然后在我的视图文件中执行以下操作 但它没有显示任何内容 S 我的模型文件 function forumList this gt db gt select oversk
  • 如何用 jQuery 替换击键?

    我需要能够用 jQuery 替换击键 当按下右箭头时 我希望改为按下 Tab 键 到目前为止我有
  • 有不同图像尺寸的缩略图 Bootstrap

    我想要包含不同大小和不同文本量的图像的缩略图 但我希望它们都具有相同的大小 像这样来自 Bootstrap 站点的示例 http getbootstrap com components thumbnails custom content 下
  • Javascript / jQuery - 转换特殊 html 字符

    我有一个pre元素中包含一些 html 代码 该代码中有特殊字符 例如 lt 所以它不会破坏页面 然后我有一个 javascript 函数 它获取此 pre 元素的内容 突出显示它 使用 codemirror 并用突出显示的文本替换元素内容

随机推荐