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

本文关键字:元素 一个 下拉列表 样式 应用于 | 更新日期: 2023-09-27 17:58:40

我目前正在尝试Kendo,我在网上发现了这个例子:

以下是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

我想知道我是否希望下拉列表中的单词"选择类别…"或"选择产品…"变成斜体的字体样式,并且只有那个元素(下拉列表的第一个元素),我该怎么做?

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

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

您必须使用类似的东西手动将样式应用于指定为占位符的项目

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