我一整天都在尝试“捕获”或分配/绑定到所选状态,并将其分配给一个名为“文本”的变量,以便我可以在另一个下拉框“产品”的另一个 API 调用中使用它。
我想我一定是错过了一些东西,并希望得到一点帮助。
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<title>Legis Connect</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="css/kendo.common.min.css">
<link rel="stylesheet" href="css/kendo.black.min.css">
<link rel="stylesheet" href="css/kendo.mobile.all.min.css">
<link rel="stylesheet" href="css/kendo.dataviz.min.css">
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div class="k-widget k-header">
<span class="infoHead">Information</span>
<p>
<input id="state" placeholder="Select State..." />
</p>
<p>
<input id="products"/>
</p>
<script>
$(document).ready(function() {
$("#state").kendoDropDownList({
// optionLabel: "Select State...",
dataTextField: "name",
dataValueField: "abbreviation",
dataSource: {
transport: {
read: {
url: "http://openstates.org/api/v1/metadata/?apikey=????????",
dataType: "jsonp"
}
}
}
});
// change: function(test){
// var text = this.value()
var states=$("#state").data("kendoDropDownList");
states.bind("change", function(e) {
var text = (this.value())
alert (text)
});
$("#products").kendoDropDownList({
optionLabel: "Select product...",
dataTextField: "legislature_name",
dataValueField: "legislature_name",
dataSource: {
transport: {
read: {
url: "http://openstates.org/api/v1/metadata/"+text+"/?apikey=???????????????????",
dataType: "jsonp"
}
}
}
})
$("#products").data("kendoDropDownList");
});
</script>
</div>
</body>
</html>
您似乎正在尝试创建级联下拉菜单;当您在状态下拉列表中选择一个值时,它会加载适用于所选状态的产品。 Telerik 有一篇有用的文章介绍了如何使用组合框控件执行此操作(在下拉列表中的工作方式相同):http://docs.kendoui.com/getting-started/web/combobox/cascading。实际上有一个名为
cascadeFrom
的属性,您可以在产品下拉列表中设置它,以告诉它从状态下拉列表中级联。希望有帮助!