我正在使用Select2 4.0。我有一个选项列表,其中一些是"删除"我想表明哪些是哪个。我的选择元素是这样的:
<style>.deleted { color: red; }</style>
<select name="itemid" id="item-list" tabindex="1">
<option></option>
<option value="1">Item 1</option>
<option value="2" class="deleted">Item 2</option>
<option value="3">Item 3</option>
</select>
它的初始化如下:
<script src="/static/js/select2.min.js"></script>
<script>
$(function() {
$("#item-list").select2({
placeholder: 'Select item'
});
});
</script>
但是,在select2生成的HTML代码中,我没有看到任何引用该类的方法。还尝试了该选项的data-deleted
属性,没有运气。
我唯一看到的就是templateResult
选项,我可以检查opt.element.className
。但我无法从那里看到如何访问select2选项。无论如何,回调运行在每一次搜索上都不是我想要的。
还有其他方法可以在Select2中设置特定选项的样式吗?
更新:如评论中所述,有一个find()
函数,但只能获取原始<option>
元素,而不是select2生成的<li>
元素。这就是我的尝试:
var sel2 = $("#item-list").select2({
placeholder: 'Select item'
});
sel2.find('.deleted').each(function() {
$(this).css('color', 'red');
});
答案 0 :(得分:25)
从Select2 4.0.1 (just released)开始,您可以使用templateResult
选项传输类。第一个参数是正在显示的数据对象,第二个参数是它将显示的容器。
$("select").select2({
templateResult: function (data, container) {
if (data.element) {
$(container).addClass($(data.element).attr("class"));
}
return data.text;
}
});
&#13;
.yellow { background-color: yellow; }
.blue { background-color: blue }
.green { background-color: green; }
&#13;
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.js"></script>
<select class="select2">
<option value="AL" class="yellow">Alabama</option>
<option value="AK" class="blue">Alaska</option>
<option value="AZ" class="green">Arizona</option>
</select>
&#13;
答案 1 :(得分:4)
如果您还想使用将类添加到所选项目,请从templateSelection
调用相同的函数。
function select2CopyClasses(data, container) {
if (data.element) {
$(container).addClass($(data.element).attr("class"));
}
return data.text;
}
$("select").select2({
templateResult: select2CopyClasses,
templateSelection: select2CopyClasses
});
答案 2 :(得分:-1)
如果要在默认情况下执行此操作,则每个新select2都会将类定义从option复制到select2-element。 加载select2.js
后包含代码1483337940000L is 02.01.2107 07:19
SimpleDateFormat sdf = new SimpleDateFormat("dd.MM.yyyy HH:mm");
sdf.setTimeZone(TimeZone.getTimeZone("UTC"));
String test = sdf.format(new Date(1483337940000L)); // Here I am getting 06:19
String test2 = new SimpleDateFormat("dd.MM.yyyy HH:mm").setTimeZone(TimeZone.getTimeZone("UTC")).format( new Date(1483337940000L)); // Here I am getting the error Cannot invoke format(Date) on the primitive type void