• AJAX 三级联动


    html代码

    <select id="str1">
    <option>加载中...</option>
    </select>
    <select id="str2">
    <option>加载中...</option>
    </select>
    <select id="str3">
    <option>加载中...</option>
    </select>

    jquery代码  AJAX

    <script type="text/javascript">
    
    
        str_load(1);
        str_load(2);
        str_load(3);
    
        function str_load(aa) {
            if (aa == "1")
            {
                $.ajax({
                    url: "select.ashx",
                    data: { "code": "0001" },
                    type: "post",
                    dataType: "json",
                    success: function (msg) {
                        $("#str1").empty();
                        for (i in msg)
                        {
                            var ss = "<option value='" + msg[i].areacode + "'>" + msg[i].areaname + "</option>";
                            $("#str1").append(ss);
                        }
                       
                    }, error: function () { alert('error'); },
                    beforeSend: function () { $("#str1").append("<option>加载中...<option>"); },
                    complete: function () { str_load(2); }
                });
            }
            if (aa == "2")
            {
                $.ajax({
                    url: "select.ashx",
                    data: { "code": $("#str1").val() },
                    type: "post",
                    dataType: "json",
                    success: function (msg) {
                        $("#str2").empty();
                        for (i in msg) {
                            var ss = "<option value='" + msg[i].areacode + "'>" + msg[i].areaname + "</option>";
                            $("#str2").append(ss);
                        }
                        
                    }, error: function () { alert('error'); },
                    beforeSend: function () { $("#str2").append("<option>加载中...<option>"); },
                    complete: function () { str_load(3); }
                });
    
            }
            if (aa == "3")
            {
                $.ajax({
                    url: "select.ashx",
                    data: { "code": $("#str2").val() },
                    type: "post",
                    dataType: "json",
                    success: function (msg) {
                        $("#str3").empty();
                        for (i in msg) {
                            var ss = "<option value='" + msg[i].areacode + "'>" + msg[i].areaname + "</option>";
                            $("#str3").append(ss);
                        }
                    }, error: function () { alert('error'); },
                    beforeSend: function () { $("#str3").append("<option>加载中...<option>"); },
                    complete: function () { }
                });
    
            }
    
        }
    
        $("#str1").change(function () { str_load(2); str_load(3); });
        $("#str2").change(function () { str_load(3); })
    
    </script>
    View Code

    一般应用程序代码

    <%@ WebHandler Language="C#" Class="select" %>
    
    using System;
    using System.Web;
    using System.Linq;  //引用linq
    using System.Collections.Generic;//引用集合
    using System.Text;  
    public class select : IHttpHandler {
        
        public void ProcessRequest (HttpContext context) {
            string code=context.Request["code"];
            StringBuilder str = new StringBuilder();
            str.Append("[");
            using (chinaDataContext con = new chinaDataContext())
            {
                List<ChinaStates> chlist = con.ChinaStates.Where(r => r.ParentAreaCode == code).ToList();
                int count = 0;
                foreach (ChinaStates ch in chlist)
                {
                    if (count > 0) str.Append(",");
                   str.Append( "{"areaname":""+ch.AreaName+"","areacode":""+ch.AreaCode+""}");
                    count++;
                }
            }
            str.Append("]");
            context.Response.Write(str);
            context.Response.End();
        }
     
        public bool IsReusable {
            get {
                return false;
            }
        }
    
    }
    View Code
  • 相关阅读:
    如何计算二进制数的取值范围
    理解网络请求中的连接超时和读取超时
    两行代码玩转Spring Data排序和分页
    面试必问Elasticsearch倒排索引原理
    你知道Java的四种引用类型吗
    抛弃配置后的Spring终极教程
    Python学习第二篇
    Python
    关于always块内for循环的执行方式
    三态门实现“一读多写”总线结构
  • 原文地址:https://www.cnblogs.com/zhangwei99com/p/7004401.html
Copyright © 2020-2023  润新知