Kendo UI [kendoDropDownList]-onSelect optionLable，添加CSS类 [英] Kendo UI [kendoDropDownList] - onSelect optionLable, add CSS class

问题描述

我正在将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屋！