鉴于以下 Kendo 下拉列表,我想在 optionLabel 选择上添加一个类,因此当 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",
}
}
}
});
最佳答案
请尝试使用以下代码片段。
方法一:
<style type="text/css">
#products_listbox li:first-child
{
background-color: Red !important;
color: Yellow !important;
}
</style>
注意:Products_list,此Products中是您的下拉列表ID。
方法2:
<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>
完成此操作后,我将尝试创建更通用的解决方案。我会更新你的。
注意:请使用方法1以获得更好的页面性能。
关于kendo-ui - Kendo DropDownList - 在 optionLabel 处添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23129793/