javascript - Selectize.js:使用默认值填充

标签 javascript jquery html select selectize.js

我有一个模式,通过 ajax 请求打开以获取要填充的内容,Selectize 就是其中之一。

Ajax 获取对象数组来填充 Selectize:

let optionsToPopulate = [{id: 6, name: "Foo"},{id: 1, name: "Bar"}]

我将上面的数组传递为:

$("#selectize").selectize({
  options: optionsToPopulate,
  items: optionsToPopulate,
  valueField: 'name',
  labelField: 'name',
  searchField: ['name'],
  plugins: ['remove_button'],
  persist: false,
  createOnBlur: true,
  maxItems: 10,
  create: true
});

但它不起作用,我错过了什么?

最佳答案

您需要使用仅包含您希望默认选择的选项值的数组(而不是包含 id、名称等的整个选项对象)来填充 items。选项“value”由您设置的 valueField 决定。例如(因为您的 valueField 设置为 name):

items: ["Foo", "Bar"]

请参阅下面的工作片段:

const options = [{ id: 1, name: "Foo" }, { id: 2, name: "Bar" }];
const items = options.map(x => x.name);
$('#select1').selectize({
  options: options,
  items: items,
  valueField: 'name',
  labelField: 'name',
  searchField: ['name'],
  plugins: ['remove_button'],
  persist: false,
  createOnBlur: true,
  maxItems: 10,
  create: true
});
<!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>
    <input id="select1" name="select1" type="text" />
  </body>
</html>

关于javascript - Selectize.js:使用默认值填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51802543/

相关文章:

php - 我如何在 PHP 编码中包含 ajax 以在同一页面中显示数据

Javascript Number.toString(基数) 行为

javascript - 更改 AngularJS 中 $scope 变量中文本的字体颜色

javascript - 如何将 JSON 字典转换为值列表?

jquery - SlideToggle JQuery 从右到左

javascript - Html 按钮不会重定向到链接

javascript - 如何在 JavaScript 中跟踪回调函数事件?

javascript - jQuery UI可排序的单击拖动不起作用

javascript - Firebase - 按值删除某些内容

html - Bootstrap 工具提示显示在 ui-grid 标题后面