Question

我目前正在尝试使用剑道，我在网上找到了这个例子：

这是ASP.NET MVC的代码：

<div class="demo-section">
<h2>View Order Details</h2>
<p>
    <label for="categories">Catergories:</label>
    @(Html.Kendo().DropDownList()
          .Name("categories")
          .HtmlAttributes(new { style = "width:300px" })
          .OptionLabel("Select category...")
          .DataTextField("CategoryName")
          .DataValueField("CategoryId")
          .DataSource(source => {
               source.Read(read => {
                   read.Action("GetCascadeCategories", "ComboBox");
               });
          })
    )
   </p>
   <p>
    <label for="products">Products:</label>
    @(Html.Kendo().DropDownList()
          .Name("products")
          .HtmlAttributes(new { style = "width:300px" })
          .OptionLabel("Select product...")
          .DataTextField("ProductName")
          .DataValueField("ProductID")
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetCascadeProducts", "ComboBox")
                      .Data("filterProducts");
              })
              .ServerFiltering(true);
          })
          .Enable(false)
          .AutoBind(false)
          .CascadeFrom("categories")
    )
        <script>
        function filterProducts() {
            return {
                categories: $("#categories").val()
            };
        }
    </script>
     </p>
     <p>
     <label for="orders">Orders:</label>
     @(Html.Kendo().DropDownList()
          .Name("orders")
          .HtmlAttributes(new { style = "width:300px" })
          .OptionLabel("Select order...")
          .DataTextField("ShipCity")
          .DataValueField("OrderID")
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetCascadeOrders", "ComboBox")
                      .Data("filterOrders");
              })
              .ServerFiltering(true);
          })
          .Enable(false)
          .AutoBind(false)
          .CascadeFrom("products")
    )
    <script>
        function filterOrders() {
            return {
                products: $("#filterOrders").val()
            };
        }
     </script>
    </p>
   </div>
    <script>
    $(document).ready(function () {
    var categories = $("#categories").data("kendoDropDownList"),
        products = $("#products").data("kendoDropDownList"),
        orders = $("#orders").data("kendoDropDownList");

       $("#get").click(function () {
        var categoryInfo = "\nCategory: { id: " + categories.value() + ", name: " + categories.text() + " }",
            productInfo = "\nProduct: { id: " + products.value() + ", name: " + products.text() + " }",
            orderInfo = "\nOrder: { id: " + orders.value() + ", name: " + orders.text() + " }";

        alert("Order details:\n" + categoryInfo + productInfo + orderInfo);
    });
});
</script>
<style scoped>
.demo-section {
    width: 460px;
    padding: 30px;
}
.demo-section h2 {
    text-transform: uppercase;
    font-size: 1.2em;
    margin-bottom: 30px;
}
.demo-section label {
    display: inline-block;
    width: 120px;
    padding-right: 5px;
    text-align: right;
}
.demo-section .k-button {
    margin: 20px 0 0 125px;
}
.k-readonly
{
    color: gray;
}

这里是带有交互式演示和源代码的网站： http://demos.telerik.com/kendo-ui/web/dropdownlist/cascadingdropdownlist.html

我想知道我是否想要单词＆＃34;选择类别...＆＃34;或＆＃34;选择产品......＆＃34;在该下拉列表中，使用了Italics的字体样式并且只有该元素（下拉列表的第一个元素），我该怎么做？

目前.HtmlAttributes(new { style = "width:300px" })（例如）会将样式应用于列表中的所有元素。如何使它仅适用于列表中的一个元素？

Answer 1

您必须使用类似于

的内容手动将样式应用于指定为占位符的项目

$("#myDropDownList").find(".k-select").css("background-color", "yellow" );

如何将样式应用于kendo下拉列表中的一个元素？

1 个答案: