Selectize.js 预填充

Question

  $("#abc").selectize({
      valueField: 'name',
      labelField: 'name',
      searchField: ['name'],
      plugins: ['remove_button'],
      createOnBlur: true,
      maxItems: 10,
      preload: true,
      create:function (input){
        callback({ name:'Cricket', name:'Football', name : 'Tennis'})
      },
  });

html代码是：

<select id="abc" name="sport[]"></select>

我想要预加载 Cricket、Football、Tennis，这意味着它应该在页面加载时自动加载。 但是选项没有加载，我错过了什么？

Answer 1

似乎您可能只是在寻找 options 属性来设置 selection 选项的初始列表和 items 属性 select 您想默认的那些。如果是这样，您不需要 create 函数（它可以让您自定义用户输入选项的处理）。见下文。

$('#abc').selectize({
  options: [
    {name: 'Cricket'},
    {name: 'Football'},
    {name: 'Tennis'}
  ],
  items: [
    'Cricket',
    'Football',
    'Tennis'
  ],
  valueField: 'name',
  labelField: 'name',
  searchField: ['name'],
  plugins: ['remove_button'],
  createOnBlur: true,
  maxItems: 10,
  preload: 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>
    <form action="" method="POST">
      <input id="abc" name="abc" type="text" />
      <button type="submit">Submit</button>
    </form>
  </body>
</html>

Selectize.js 预填充

Selectize.js pre populate

javascript

jquery

html

selectize.js