三级联动

来源：互联网发布：ubuntu mate 安装pyqt 编辑：程序博客网时间：2024/06/09 22:59

@using HyBy.Ushare.BusinessEntity

@model HyBy.Ushare.ManageSite.HelpSystem.Models.EditMessageModel
@{
Layout = null;
}

<!DOCTYPE html>

<script type="text/x-jsrender" id="header">
        <option value="-1">--请选择--</option>
    </script>
    
    <script type="text/x-jsrender" id="ddlone">
        {{include tmpl="#header"/}}
        {{for #data.first}}
        <option value="{{:CatalogID}}">{{:CatalogName}}</option>
        {{/for}}
    </script>
    
    <script type="text/x-jsrender" id="ddltwo">
        {{include tmpl="#header"/}}
        {{for #data.secound}}
        <option value="{{:CatalogID}}">{{:CatalogName}}</option>
        {{/for}}
    </script>
    
    <script type="text/x-jsrender" id="ddlthree">
        {{include tmpl="#header"/}}
        {{for #data.third}}
        <option value="{{:CatalogID}}">{{:CatalogName}}</option>
        {{/for}}
    </script>

            $("#FirstDro").change(this, function () {
                LoadSecound(this.value);
            });
            $("#SecoundDro").change(this, function () {
                LoadThird(this.value);
            });
            //$("#sub").click(function () {
            //    var dd = $("#ThirdDro").val();
            //    alert(dd);
            //});

        })
        //加载一级类别
        function LoadFirst() {
            $.getJSON("/HelpSystem/HelpMessage/GetAllFirst", function (json) {
                var html = $("#ddlone").render({ "first": json });
                $("#FirstDro").html(html);
            });
        }
        //创建一级类别改变触发的事件,绑定二级类别
        function LoadSecound(value) {
            $.getJSON("/HelpSystem/HelpMessage/GetSecoundByFirstId?id=" + value, function (json) {
                if (value == "-1") {
                    $("#SecoundDiv").css("display", "none");
                }
                else {
                    if (!$.isEmptyObject(json)) {
                        $("#SecoundDiv").css("display", "block");
                        var html = $("#ddltwo").render({ "secound": json });
                        $("#SecoundDro").html(html);
                    }
                    else {
                        $("#SecoundDiv").css("display", "none");
                    }
                }

            });
        }
        //创建二级类别改变触发的事件,绑定三级类别
        function LoadThird(value) {
            if (value == "-1") {
                $("#ThirdDiv").css("display", "none");
            }
            else {
                $.getJSON("/HelpSystem/HelpMessage/GetSecoundBySecoundId?id=" + value, function (json) {
                    if (!$.isEmptyObject(json)) {
                        $("#ThirdDiv").css("display", "block");
                        var html = $("#ddlthree").render({ "third": json });
                        $("#ThirdDro").html(html);
                    }
                    else {
                        $("#ThirdDiv").css("display", "none");
                    }
                });
            }

        }

        function ss() {
            var dd = $("#ThirdDro").val();
            $("#CatalogID").val(dd);
        }
    </script>
    <style type="text/css">
        .dro {
            width: 200px;
        }
    </style>
    <title>Edit</title>
</head>
<body>
    <div>
        <form id="example" action="/HelpSystem/HelpMessage/Edit" method="post" onsubmit="return ss()">
            @Html.HiddenFor(model => model.HelpID)
            <table>
                @{

                    if (ViewData["Content"] == null)
                    {
                        @Html.HiddenFor(model => model.CatalogID, new { id = "CatalogID" })
                        <tr>
                            <td colspan="2">
                                <div id="FirstDiv">一级类别：<select class="dro" id="FirstDro"></select></div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <div id="SecoundDiv" style="display:none">二级类别：<select class="dro" id="SecoundDro"></select></div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <div id="ThirdDiv" style="display:none">三级类别：<select class="dro" id="ThirdDro"></select></div>
                            </td>
                        </tr>
                    }
                }

                <tr>
                    <td>@Html.LabelFor(model => model.HelpName)</td>
                    <td>@Html.TextBoxFor(model => model.HelpName, new { id = "HelpName" })</td>
                </tr>
                <tr>
                    <td>@Html.LabelFor(model => model.HelpContent)</td>
                    @{
                        if (ViewData["Content"] != null)
                        {
                            <td><textarea id="content1" name="content1" cols="100" rows="8" style="width:700px;height:400px;visibility:hidden;">@ViewData["Content"]</textarea></td>
                        }
                        else
                        {
                            <td><textarea id="content1" name="content1" cols="100" rows="8" style="width:700px;height:400px;visibility:hidden;"></textarea></td>
                        }
                    }
                </tr>
            </table>
            <input id="btnNoHtml" type="button" value="获取内容（不支持html）" />
            <input id="btnHtml" type="button" value="获取内容（支持html）" />

0 0