我有一个模式,通过 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/