我正在使用选择.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(使用前将#替换为@)