Question

我有一个select2插件适用于选择框。选项是连接在一起的两个值的结果。我需要为select2框中的一个值赋予不同的颜色。那些人有什么选择吗？

我的Html

<select id="template" class="form-control template-select-search" style="display: inline-block; width: 200px;">
    <option value="">-- Template --</option>
    <option value="${article.id}">value1 : value2 </option>
</select>

需要修改此值2以进行样式化。通过大量文章但无法获得帮助。感谢您的帮助

这是我创建的PLUNKER

Answer 1

这可能很快但应该有用。做点什么

<option value="${article.id}">value1 :
    <span style="background-color:Your Color"> value2 </span>
</option>

Answer 2

您可以使用select 2 template

请参阅此处的演示： https://plnkr.co/edit/Tv3OVpQbmlBDeQSgwKJa?p=preview

$(document).ready(function(){
  function formatState (state) {
  if (!state.id) { return state.text; }
  var values = state.element.value.split(":");
  var $state = $("<div>"+values[0] + ":<span style=\"background-color:red\">" + values[1]+"</span></div>");
  return $state;
};

 $('#testSelect').select2({
  templateResult: formatState
});
});

无论如何我们可以设置select2的选项

2 个答案: