如何将样式应用于剑道下拉列表中的一个元素
本文关键字:元素 一个 下拉列表 样式 应用于 | 更新日期: 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" );