javascript - Selectize.js 预填充

标签 javascript jquery html selectize.js

我有以下 selectize.js :

  $("#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预加载,意味着它应该在页面加载时自动加载。 但选项没有加载,我错过了什么?

最佳答案

看起来您可能只是在寻找 options 属性来设置选择选项的初始列表,以及 items 属性来选择您想要的默认选项。如果是这样,您就不需要 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>

关于javascript - Selectize.js 预填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51545561/

相关文章:

JavaScript:在没有 JS 框架的情况下捕获回车键

javascript - 如何从另一个函数返回一个函数然后调用它?

javascript - 三路比较变量和字符串

javascript - 如何将 css 应用于使用 append() 创建的元素

javascript - angularjs ng-重复来自不同 i18n 文件的下拉值

html - CSS 背景图片中心与边距不一样 :0 auto with scrollbars

html - 带有 Bootstrap 的简单 css 来创建单个垂直对齐的 div?

javascript - 在这种情况下,为什么我必须单击两次才能加载图像?

jquery - 如何删除下拉菜单 ul li 和 jquery 上的文本突出显示

javascript - 如何在具有交互式内容的动态创建的 div 上添加事件监听器