使用ajax实现城市下拉框

一个现实城市下拉框的界面

 

 

 

html代码：

 

复制代码

 <table>

            <tr>

                <td><h5>城市下拉框</h5></td>

                <td>

                    <select id="selNation" style="width:130px">

                        <option>请选择省市/其他...</option>

                    </select>

                        <select id="selCity" style=" width:130px">

                        <option >请选择城市/其他...</option>

                    </select>

                        <select id="litel" style=" width:130px">

                        <option>请选择县/区...</option>

                        </select>

                </td>

            </tr>

</table>

复制代码

js代码：我这里使用的jquery操作Dom和ajax，所以要导入jquery脚本，这里就不提供了，到官方网站 下载都有

 

复制代码

$(function () {

    GetCity(0);//页面加载时就现实 数据库第一个数据，一定要加上

    $("#selNation").change(function () {

        // 当省级改变的时候，让市级和县级文本清空

        $("#selCity option").remove();

        $("#litel option").remove();

        //获得省级的id

        var id = $("#selNation option:selected").attr("id");

        //查询该省级的市级数据

        GetCity(id, 'city');

    })

    $("#selCity").change(function () {

        // 当市级改变的时候，让县级文本清空

        $("#litel option").remove();

        //获得市级的id

        var id = $("#selCity option:selected").attr("id");

        //查询该省市级的县级数据

        GetCity(id, 'county');

    })

    //解决类似北京只有一个城市的情况

    $("#selCity").click(function () {

        $("#litel option").remove();

        var id = $("#selCity option:selected").attr("id");

        GetCity(id, 'county');

    })

});

function GetCity(pid, c) {

    var LoadCityUrl = $("#LoadCityUrl").val(); //获得后台要访问的url,这里访问的就是上面后台代码所在的类中

    //执行ajax请求

    $.ajax({ url: LoadCityUrl, data: "id= " + pid, type: 'get', success: function (res) {

        var arr = eval(res); //返回的json数据一定要执行evel()方法才能使用循环读取数据，这里很重要；；；

        $.each(arr, function (key, value) {

            if (pid == "0") {//加载省级级下拉框（数据库里面省级的pid都为0）

                $("#selNation").append(" <option id='" + value.tb_AreaId + "'>" + value.AreaName + "</option>");

            }

            else {

                if (c == 'city') {//加载市级下拉框

                    $("#selCity").append(" <option id='" + value.tb_AreaId + "'>" + value.AreaName + "</option>");

                }

                else {//加载县区下拉框

                    $("#litel").append(" <option id='" + value.tb_AreaId + "'>" + value.AreaName + "</option>");

                }

            }

        })

    }

    });

}

复制代码

 

 

后台查询数据库的代码：

 

1.返回json数据

 

复制代码

 #region 收货地址=>显示城市下拉框+SelectNation(int id)

        /// <summary>

        /// 收货地址=>显示城市下拉框

        /// </summary>

        /// <param name="id"></param>

        /// <returns></returns>

        public string SelectNation(int id)

        {

            //返回json数据 类似：("[{ 'name': '广东', 'id': '1' }, { 'name': '北京', 'id': '2' }, { 'name': '湖南', 'id': '3' }]")        

            List<tb_Area> list = null;

            list = mbsc.tb_Area.Where(c => c.AreaPid == id).ToList();//我这里使用的是linq表达式查询数据，你也可以用其他方式查询数据

            //如果id不为空就是返回省份的城市列表

            System.Web.Script.Serialization. JavaScriptSerializer Json = new System.Web.Script.Serialization. JavaScriptSerializer();

            string str = Json.Serialize(list);//json序列化集合

            return str;

        }

 #endregion

复制代码

2.模型代码

 

public class tb_Area

    {

        public int tb_AreaId { set; get; }

        public string AreaName { set; get; }

        public int AreaPid { set; get; }

    }