码迷,mamicode.com
首页 > Web开发 > 详细

AJAX 三级联动

时间:2017-06-14 02:18:30      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:hid   response   url   value   ble   select   turn   state   func   

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

 

AJAX 三级联动

标签:hid   response   url   value   ble   select   turn   state   func   

原文地址:http://www.cnblogs.com/zhangwei99com/p/7004401.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!