欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

使用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>