Kendo UI [kendoDropDownList]-onSelect optionLable,添加CSS类 [英] Kendo UI [kendoDropDownList] - onSelect optionLable, add CSS class
本文介绍了Kendo UI [kendoDropDownList]-onSelect optionLable,添加CSS类的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在将KendoDropDownList用于我的项目,并替换脚本中的选择框选项.
I am using KendoDropDownList for my project and replacing the select box options from script.
如果我选择optionLable(-- Please select --
)
I want to add css class placeholder if I select optionLable (-- Please select --
)
Online Demo
请检查下面的参考图片我在说什么.
Please check the below reference image what I am talking about..
HTML
<select id="selectBox" data-bind="value: index, source: newOptions">
<option>{Label 1}</option>
<option>{Label 2}</option>
<option>{Label 3}</option>
</select>
脚本
$("#selectBox").kendoDropDownList({
valuePrimitive: true,
dataTextField: "text",
dataValueField: "value",
optionLabel: "-- Please select --"
});
var icsNew = kendo.observable({
index: 2,
newOptions: [
{ value: 1, text: "My option 1" },
{ value: 2, text: "My option 2" },
{ value: 3, text: "My option 3" } ]
});
kendo.bind($("#selectBox"), icsNew);
CSS
.k-dropdown{border:1px solid #ccc;}
.placeholder{color:red;}
推荐答案
您可以使用optionLabelTemplate
来实现:
$("#selectBox").kendoDropDownList({
...
optionLabel: "-- Please select --",
optionLabelTemplate:'<span style="color:red">-- Please select --</span>',
...
});
这篇关于Kendo UI [kendoDropDownList]-onSelect optionLable,添加CSS类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文