省市级联--jquery调取json数据

使用jQuery mobile作为创建移动web的框架,需要实现省市级联的功能,具体代码如下(还需要优化的地方):

Html代码:

jQuery mobile中,有input  list属性,下方紧跟<datalist >标签,中间包含的<option value="XXXX"></option>即为选项,相当于这个input为有下拉列表的功能,当然,input的list名称需要和datalist中的id一致。

 <input id="province" list="prvlist" placeholder="省/自治区/直辖市" onblur="changeProvince();">
    <datalist id="prvlist">

    </datalist>
    <input style="" id="city" list="citylist" placeholder="市" onblur="changeCity();">
    <datalist id="citylist">

    </datalist>
    <input style="" id="area" list="arealist" placeholder="区">
    <datalist id="arealist">

    </datalist>

js代码:

js代码,主要功能

1、提取json数据,绑定到省级下拉列表内

2、省级input选择好后,市级列表自动绑定

3、区级下拉列表同市级一样

 <script>

        $(function () {
            getProvince();    //页面打开后,省级下拉列表自动绑定
        })
        //获取省份
        function getProvince() {
            var Aid;
            var Afather;
            $.get('area_json0.txt', {}, function (data) {
                for (var i = 0; i < data.length; i++) {
                    if (data[i].fatherId == 0) {
                        Afather += '<option id=" ' + data[i].id + '" value="' + data[i].name + '">';
                    }
                }
                $("#prvlist").append(Afather);
            } , 'json');
        }

        function changeProvince(){
            var city;
            var prv_val=$("#province").val();
            getJson(prv_val);
        }
        function changeCity(){
            var city_val=$("#city").val();
            getJsonArea(city_val);
        }
        function getJson(Name){
            var cityID;
            $.get('area_json0.txt', {}, function (data) {
                for (var i = 0; i < data.length; i++) {
                    if (data[i].name == Name) {
                        cityID=data[i].id;
                    }
                }
                setCity(cityID);
            } , 'json');
        }
        function setCity(val){
            var Acity;
            var $listcity=$("#citylist");
            $.get('area_json0.txt', {}, function (data) {
                for (var n = 0; n < data.length; n++) {
                    if (data[n].fatherId == val) {
//                        alert(data[n].id);
                        Acity += '<option id=" ' + data[n].id + '" value="' + data[n].name + '">';
                    }
                }
                $listcity.append(Acity);
            } , 'json');
       }
        function getJsonArea(Name){
            var areaID;
            $.get('area_json0.txt', {}, function (data) {
                for (var i = 0; i < data.length; i++) {
                    if (data[i].name == Name) {
                        areaID=data[i].id;
                    }
                }
                setArea(areaID);
            } , 'json');
        }
        function setArea(Aval){
            var Aarea;
            var $listarea=$("#arealist");
            $.get('area_json0.txt', {}, function (data) {
                for (var m = 0; m < data.length; m++) {
                    if (data[m].fatherId == Aval) {
//                        alert(data[n].id);
                        Aarea += '<option id=" ' + data[m].id + '" value="' + data[m].name + '">';
                    }
                }
                $listarea.append(Aarea);
            } , 'json');
        }
    </script>

代码应该还可以进一步优化,暂时将代码保存。

时间: 2024-09-29 06:44:28

省市级联--jquery调取json数据的相关文章

jquery处理json数据

Json简单讲就是Javascript对象或数组. Json形式一: javascript对象    { "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" } Json形式二: javascript数组    [{ "firstName": "Brett", "l

jQuery获取json数据实现代码

jQuery获取json数据实现代码:使用jQuery操作json数据是非常的频繁的,下面提供两端代码供大家参考之用,大家可以自行分析,以便灵活应用. /栏目 //发送ajax请求 $.getJSON( "../../../Templet/GetInfoHandler.ashx", //产生JSON数据的服务端页面 {id: "0", sid: "1;2;3", rid: Math.round(Math.random() * 10) }, //向

Jquery 返回json数据在IE浏览器中提示下载的问题

Jquery 返回json数据,IE浏览器提示下载的问题,当提交完数据后返回的本来是json数据的,在火弧里测试正常,解决方法如下 今天遇到Jquery 返回json数据,IE浏览器提示下载的问题,当提交完数据后返回的本来是json数据的,在火弧里测试正常,但是IE里老是提示保存,在网上搜索了下,大部分是说将ContentType设置为"text/xml“本人测试了下,返回值为undefined, 原返回值设定:context.Response.ContentType = "appli

jquery中json数据转换为字典

首先在前台页面中的json数据为 var recipe = {}; recipe["name"] = $("#name").val(); recipe["age"] = $("#age").val(); recipe["sex"] = $("#sex").val(); recipe["medicine"] = "{'name': 'a', 'value':

bobo使用jQuery解析JSON数据

上例中得到的JSON数据如下,是一个嵌套JSON: {"comments":[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西","id":2,"nickname":"小强"}]} 获取JSON数据,在jQuery中有一个

jQuery操作json数据

json是一种轻量级数据交换格式,简单的json格式为[{"key1":"value1"},{"key2":"value2"}], []代表数组,{}代表数组中的数据对象,key1,key2是一个json对象中的key,一个json中key值唯一,value1,value2,是key键对应的值. 下面使用jquery解析简单的son文件. 这里是songs.json文件内容 [ {"optionKey":&

jquery请求json数据

本文实例讲述了jQuery实现异步获取json数据的2种方式,在web程序开发中非常具有实用价值.分享给大家供大家参考之用.具体方法如下: 通常来说,jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本文就来实现使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: ? 1 2 3 4 {  "one" : "Hello",  "two" : "Wor

jQuery提交Json数据到Webservice,并接收返回的Json数据

jQuery ajax webservice:get 和 post 一.GET 方式 客户端 复制代码 代码如下: var data = { classCode: "0001"}; // 这里要直接使用JOSN对象 $.ajax({ type: "GET", contentType: "application/json; charset=utf-8", url: "/WebServices/ProductPropertyWebServi

JQuery解析JSON数据

<script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script> {"comments":[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西"