Question

我在表单中使用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({
});

编辑：我有这个工作取代'with'所以数据数据现在是：“[{”info“：”aaa“}，{”info“：”bbb“}]”

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

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

那么......我如何实现多选，POST逗号分隔列表，其中的选项设置自HTML而不是js。

Answer 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>

注意：使用单引号

Answer 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 数组将包含要搜索的内容。

选择具有数据数据的选项列表填充

2 个答案: