选择2模板<span>文本</span>在选择渲染中
Select2 Templating <span>text</span> in selection render
我已经在选择风格化上积累了很多。我不是那么专业,我只是在学习,我还不能独自解决这个问题。我使用了select2,找到了最能接受的select表单类型。我试图理解出了什么问题,但我做不到。我想要这样的选择显示跨度与文本,而不仅仅是一个文本。就像照片1上的一样。但我一直只得到没有颜色标记的文本-图片#2。
在此处输入图像描述
我的代码是:
<div class="fieldset fieldset-1">
<label for="color">Choose color</label>
<select name="color" class="color-choose">
<option value="grn">Green</option>
<option value="blu">Blue</option>
<option value="brn">Brown</option>
<option value="blk">Black</option>
<option value="red">Red</option>
<option value="yel">Yellow</option>
<option value="wht">White</option>
</select>
</div>
和JS代码:
function formatState (state) {
if (!state.id) { return state.text; }
var $state = $(
'<span class="color-element color-' + state.element.value + '">' + state.text + '</span>'
);
return $state;
};
$(".color-choose").select2({
templateResult: formatState
});
所以我得到这样的结果:在这里输入图像描述
请帮我解决它!将不胜感激!
您只设置了结果的模板(使用templateResult
),但没有设置选择的模板。Select2允许您为选择和结果使用不同的模板(请参见AJAX示例),因此必须使用templateSelection
选项为选择设置渲染器。
$(".color-choose").select2({
templateResult: formatState,
templateSelection: formatState
});
相关文章:
- Div根据<选择>菜单
- 如何更改<选择>使用angularJS从控制器获得的值
- 当<选择的选项>重新选择
- 依赖<选择>HTML和JavaScript菜单
- 选择<李>使用普通JavaScript的子节点,而不是孙节点
- 如何传递相同页面<选择>值到同一页<f: param>
- 渲染<选项值=“;foo”;选择>在服务器上
- <选择>标签不起作用
- 当我有<选择>下拉列表
- 记住<选择>重新加载页面
- <中的链接;选择>下拉选项
- 映射多个<选择>至<输入>
- <上的applyBindings();选择>正在导致我的subscribe()起火,
- 触发器<输入类型=“;文件“>用angular程序选择文件
- 如何动态生成X数量的新<输入>基于a<选择>(Angular2内)
- 在<选择>使用angular ng选项可能使用ng init
- 如何在提交<选择>与AngularJS
- jQuery将输入集中在下一个tr->td时,td包含一个输入字段,但从不关注html选择
- 使用动态<选择>以显示<输入类型=“;文本>
- 正在读取<p: 选择一个菜单/>在onchange回调中