• jQueryJSON 无刷新三级联动


    曾祥展

    曾祥展

     <asp:DropDownList ID="ddl1" runat="server" Width="100px" ></asp:DropDownList>
     <asp:DropDownList ID="ddl2" runat="server" Width="100px" ></asp:DropDownList>
     <asp:DropDownList ID="ddl3" runat="server" Width="100px" ></asp:DropDownList>
    js:
     <script src="js/jquery-1.4.2.min.js" type="text/javascript" ></script>
        
        <script type="text/javascript">
    
            $(document).ready(function () {        
                GetA();
                $("#ddl1").change(function () { GetB();  });          
                $("#ddl2").change(function () { GetC();  });         
            });      
            
        function GetA()
        {
            $("#ddl1").html("");
            $("#ddl1").append("<option value='-1' selected='selected'>请选择...</option>");
            //$("select[name$=ddl1] > option:selected").remove();
            var strId = 0;
            $.getJSON("LoadClass.ashx?ddlId=" + strId, function (data) {
             for (var i = 0; i < data.length; i++) {
                 $("select[name$=ddl1]").append($("<option></option>").val(data[i].ID).html(data[i].Cname));
             };
             GetB();          
         });
                     
        }
        function GetB()
        {
            $("#ddl2").html(""); $("#ddl3").html("");
            var strId = $("#ddl1").attr("value");       
            if (strId != 0) {
                $.getJSON("LoadClass.ashx?ddlId=" + strId, function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $("select[name$=ddl2]").append($("<option></option>").val(data[i].ID).html(data[i].Cname));
                    };
                    GetC();              
                });                            
            }           
        }
        function GetC()
        {
            $("#ddl3").html("");
            var strId = $("#ddl2").attr("value");  
            if (strId != 0) {
                $.getJSON("LoadClass.ashx?ddlId=" + strId, function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $("select[name$=ddl3]").append($("<option></option>").val(data[i].ID).html(data[i].Cname));
                    };                        
                });                 
            }        
        }
    </script>

    LoadClass.ashx:

    <%@ WebHandler Language="C#" Class="LoadClass" %>
    
    using System;
    using System.Web;
    
    using System.Text;
    using System.Data;
    
    public class LoadClass : IHttpHandler {
        
        public void ProcessRequest (HttpContext context) {
            // 数组   [{"ID":"275","Cname":"A1"},{"ID":"319","Cname":"A2"},{"ID":"322","Cname":"A3"}]
            int strId = Convert.ToInt32(context.Request["ddlId"]);               
            string strSQL = "select * from Class where parent_Ptr=" + strId + "  order by classOrder asc ";
            db d = new db();
            DataTable dt = d.getDT(strSQL);
            StringBuilder strClass = new StringBuilder();
            if (dt != null)
            {
                strClass.Append("[");
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    strClass.Append("{");
                    strClass.Append("\"ID\":\"" + dt.Rows[i]["id"].ToString() + "\",");
                    strClass.Append("\"Cname\":\"" + dt.Rows[i]["classCname"].ToString() + "\"");
    
                    if (i != dt.Rows.Count - 1)
                    {
                        strClass.Append("},");
                    }
                }
    
            }
            strClass.Append("}");
            strClass.Append("]");      
            context.Response.ContentType = "application/json";
            context.Response.ContentEncoding = Encoding.UTF8;
            context.Response.Write(strClass.ToString());
            context.Response.End();
        }
     
        public bool IsReusable {
            get {
                return false;
            }
        }
    
    }

    注意:

    //后台只能获取value值,不能直接获取text,需要通过js、控件中转  
           //结果:275 276 277 
           Label1.Text = Request.Form[ddl1.UniqueID] + " " 
                       + Request.Form["ddl2"] + " " 
                       + Request.Form[ddl3.ClientID.Replace("_", "$")] ;
    遇到的问题:
    下拉框text的值通过HiddenField控件中转
      <asp:HiddenField ID="HiddenField1" runat="server" />
      <asp:HiddenField ID="HiddenField2" runat="server" />
      <asp:HiddenField ID="HiddenField3" runat="server" /> 

    把选中下拉框的值赋予隐藏控件中: 
    <script type="text/javascript">       
            var Key1 = $("#ddl1>option:selected").val();
            $('#HiddenField1').val(Key1);
            var Key2 = $("#ddl2>option:selected").val();
            $('#HiddenField2').val(Key2);
            var Key3 = $("#ddl3>option:selected").val();
            $('#HiddenField3').val(Key3);    
       </script>

    选择下拉框后 动态赋值到HiddenField 控件中的值 无法与下拉框选中的值相对应!

    可能与初始化有关,赋值这段代码应该放到什么地方呢?或者有什么好的方法,欢迎讨论?


    作者:水木    
     
  • 相关阅读:
    share point 已在此服务器场中安装 ID 为 15/b7a69889-1789-4855-b8bd-9a3b4cfd7fc0 的功能。请使用强制属性显式地重新安装此功能。
    给一个div添加多个背景图片
    input输入框,在手机上,软键盘会将固定定位和绝对定位的按钮顶起,解决办法
    js判断浏览器,设备类型
    js中函数function的三种定义方式,声明式定义函数、函数表达式、立即执行函数的区别
    vue项目里面,__ob__对象的理解
    浏览器渲染过程-面试
    MySQL的连接查询:left join , right join , join
    MYSQL实现连表查询
    node后台koa2项目,如何发布到服务器?入门学习
  • 原文地址:https://www.cnblogs.com/hsapphire/p/1671110.html
Copyright © 2020-2023  润新知