Kendo UI [kendoDropDownList] - onSelect optionLable，添加CSS类

Question

我正在为我的项目使用KendoDropDownList并从脚本中替换选择框选项。

如果选择optionLable（-- Please select --）

，我想添加css类占位符

  

Online Demo

请查看以下参考图片我在说什么..

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;}

Answer 1

您可以使用optionLabelTemplate：

来实现

$("#selectBox").kendoDropDownList({
    ...
    optionLabel: "-- Please select --",
    optionLabelTemplate:'<span style="color:red">-- Please select --</span>',
    ...
});