鉴于Kendo下拉菜单,我想在optionLabel select上添加一个类,因此当ddl展开时,我可以从视觉上区分选项标签是什么和选项是什么。理想情况下,这应该从dataBound
完成,并且显然必须从js完成。我正在寻找一个不错的解决方案,我真的不想遍历大部分DOM。
http://trykendoui.telerik.com/@vojtiik/uLEc
$("#products").kendoDropDownList({
dataTextField: "ProductName",
dataValueField: "ProductID",
optionLabel: "select",
dataBound: function(e) {
// find the option label and add class
},
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "http://demos.telerik.com/kendo-ui/service/Products",
}
}
}
});
您可以在更改事件上执行此操作。或者也可以通过其他任何方式执行。我认为这种方法非常简单。您也可以找到选项标签,而不是找到第一个孩子。
$(document).ready(function() {
$("#products").kendoDropDownList({
dataTextField: "ProductName",
dataValueField: "ProductID",
optionLabel: "select",
change: function(e){
var listItem = $( "#products_listbox li:first-child" );
listItem.css( "background-color", "red" ) ;
},
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "http://demos.telerik.com/kendo-ui/service/Products",
}
}
}
});
});
请尝试以下代码段。
Method1:
<style type="text/css">
#products_listbox li:first-child
{
background-color: Red !important;
color: Yellow !important;
}
</style>
注意:Products_list,此产品中的是您的下拉ID。
Method2:
<script type="text/javascript">
$(document).ready(function () {
$("#products").kendoDropDownList({
dataTextField: "ProductName",
dataValueField: "ProductID",
optionLabel: "select",
open: function(e){
var listItem = $( "#products_listbox li:first-child" );
listItem.css( "background-color", "red" );
listItem.css( "color", "Yellow" );
},
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "http://demos.telerik.com/kendo-ui/service/Products",
}
}
}
});
});
</script>
一旦完成,我将尝试创建更多通用的解决方案。我会更新你的。
注意:请使用method1以获得更好的页面性能。
您可以使用open事件从UL中找到第一个LI元素并修改其样式。
例如
open: function(e) {
this.list.find(">ul>li:first").css("background", "red")
}
示例here。
如在此问题上所述:Kendo UI [kendoDropDownList] - onSelect optionLable, add CSS class
无需使用开放功能,您可以使用optionLabelTemplate:
实现$("#selectBox").kendoDropDownList({
...
optionLabel: "Select",
optionLabelTemplate:'<span style="color:red">Select</span>',
...
});
用class =“ yourClassName” ;-)替换style =“ color:red”;>