使用数据数据选择选项列表总体答案

【问题标题】：Selectize option list population with data-data使用数据数据选择选项列表总体
【发布时间】：2021-01-16 23:35:35
【问题描述】：

我在表单中使用 selectize.js，并希望从 HTML 中填充选项列表。我对版本 0.12.0 的发行说明的理解是，这应该可以使用“data-data”属性来实现，但我无法使其工作或在任何地方找到完整的工作示例。

我希望做这样的事情：

html:

<label for="leagues">Leagues:</label>
<input type="text" id="leagues" name="leagues" class="form-control" value='aaa' data-data="[{'info': 'aaa'},{'info': 'bbb'}]">

用js：

$('#leagues').selectize({
});

编辑：我已经将 ' 替换为 " 所以数据数据现在是："[{"info":"aaa"},{"info":"bbb"}]"

FOLLOW ON：现在选项列表按预期填充，但它也覆盖了值标记，因此似乎不可能使用 n 项的选项列表呈现控件，但选择了 3 个（这似乎我要打败 dataAttr 的全部意义不是吗？？？？）。

我可以使用文档中的 States 示例来完成这项工作 - 但这使用而不是，因此返回值数组而不是逗号分隔列表。

那么...我如何实现一个多选，发布一个逗号分隔的列表，选项从 HTML 而不是 js 设置。

【问题讨论】：

标签： selectize.js

【解决方案1】：

终于用php数据得到了解决方案。

<option value="my_id" title="{{$category_name}}" data-data='<?php echo str_replace("'", "\'", json_encode(array('my_desc'=> {{$category_desc}})))?>'>{{$category_name}} </option>

总之你可以这样写：

$array_in_json = (json_encode($selected_array));
$array_ready_for_tag =str_replace("'", "\'", $array_in_json);

最后：

<select data-data='<?php echo $array_ready_for_tag;?>' ... > ... </select>

注意：使用单引号

【讨论】：

【解决方案2】：

Selectize.js 添加子文本（隐藏搜索字段很容易）

从 jquery 或原始 html 创建普通 html 选项

value = {id:1, name:"sample_name", owner : "owner_name" .....}

<option value="${value.id}" data-data='${JSON.stringify(value)}' selected>${value.name} (${value.get_unit.short_form})</option>

$('#supplier_id').selectize({ searchField: ['name','owner', 'location', 'contact', 'email'], sortField: 'text' });

searchField 数组将包含要搜索的内容。

【讨论】：