使用ASP.NET MVC2和JQuery实现下拉列表的三级联动功能
最编程
2024-02-01 13:42:25
...
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script src="../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
GetByJquery();
$("#ddlCompany").change(function () { GetPlant() });
$("#ddlPlant").change(function () { GetLogicEquipment() });
});
function GetByJquery() {
$("#ddlCompany").empty();
$.getJSON("/Test/GetCompany/",function (data) {
$.each(data, function (i, item) {
$("<option></option>")
.val(item["companyId"])
.text(item["companyName"])
.appendTo($("#ddlCompany"));
});
GetPlant();
});
}
function GetPlant() {
$("#ddlPlant").empty();
var url = "/Test/GetPlant/" + $("#ddlCompany").val()+"/";
$.getJSON(url, function (data) {
$.each(data, function (i, item) {
$("<option></option>")
.val(item["plantId"])
.text(item["plantName"])
.appendTo($("#ddlPlant"));
});
GetLogicEquipment();
});
}
function GetLogicEquipment() {
$("#ddlLogicEquipment").empty();
var url = "/Test/GetLogicEquipment/"+$("#ddlCompany").val()+","+$("#ddlPlant").val()+"/";
$.getJSON(url, function (data) {
$.each(data, function (i, item) {
$("<option></option>")
.val(item["LogicEquipmentId"])
.text(item["logiEquipmentName"])
.appendTo($("#ddlLogicEquipment"));
});
});
}
</script>
<table>
<tr>
<td>
<select id="ddlCompany" />
</td>
<td>
<select id="ddlPlant" />
</td>
<td>
<select id="ddlLogicEquipment" />
</td>
</tr>
</table>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script src="../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
GetByJquery();
$("#ddlCompany").change(function () { GetPlant() });
$("#ddlPlant").change(function () { GetLogicEquipment() });
});
function GetByJquery() {
$("#ddlCompany").empty();
$.getJSON("/Test/GetCompany/",function (data) {
$.each(data, function (i, item) {
$("<option></option>")
.val(item["companyId"])
.text(item["companyName"])
.appendTo($("#ddlCompany"));
});
GetPlant();
});
}
function GetPlant() {
$("#ddlPlant").empty();
var url = "/Test/GetPlant/" + $("#ddlCompany").val()+"/";
$.getJSON(url, function (data) {
$.each(data, function (i, item) {
$("<option></option>")
.val(item["plantId"])
.text(item["plantName"])
.appendTo($("#ddlPlant"));
});
GetLogicEquipment();
});
}
function GetLogicEquipment() {
$("#ddlLogicEquipment").empty();
var url = "/Test/GetLogicEquipment/"+$("#ddlCompany").val()+","+$("#ddlPlant").val()+"/";
$.getJSON(url, function (data) {
$.each(data, function (i, item) {
$("<option></option>")
.val(item["LogicEquipmentId"])
.text(item["logiEquipmentName"])
.appendTo($("#ddlLogicEquipment"));
});
});
}
</script>
<table>
<tr>
<td>
<select id="ddlCompany" />
</td>
<td>
<select id="ddlPlant" />
</td>
<td>
<select id="ddlLogicEquipment" />
</td>
</tr>
</table>
</asp:Content>
上一篇: 酷炫技术教学第二弹:超简单传奇单机架设指南和游戏GM设置步骤
下一篇: 三级运维体系