Kendo UI [kendo DropDownList] - 在选择选项标签上，添加 CSS class

Question

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

我想添加 css class placeholder 如果我 select optionLable (-- Please select --)

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>',
    ...
});

Kendo UI [kendo DropDownList] - 在选择选项标签上，添加 CSS class

Kendo UI [kendoDropDownList] - onSelect optionLable, add CSS class

jquery

kendo-ui

kendo-dropdown