jquery调取json数据实现省市级联的方法

本文实例讲述了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>

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

赞 (0)

相关推荐

  • JavaScript实现常用二级省市级联下拉列表的方法

    本文实例讲述了JavaScript实现常用二级省市级联下拉列表的方法.分享给大家供大家参考.具体分析如下: 这里省和市的名称都是动态填充,选择省后自动填充城市 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:/

  • JavaScript省市级联下拉菜单实例

    最近学了一个关于省市级联简单的小例子,贴出来与大家分享一下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> </head> <body> <select id="selProvince" onchange="chan

  • java json 省市级联实例代码

    复制代码 代码如下: //     获取国家省市区信息$(document).ready(function(){ //从程序获取json格式的数据var info = $request.getAttribute("manualOrderAreaInfo"); var provinceInfo = $("#provinceId");var cityId = $("#cityId"); //清空信息provinceInfo.empty(); //循环

  • javascript省市级联功能实现方法实例详解

    本文实例讲述了javascript省市级联功能实现方法.分享给大家供大家参考,具体如下: 初步实现方法: <html> <head> <script language="javascript"> function changecity(){ var province = document.form1.selprovince.value; var newoption1,newoption2; switch(province){ case "四

  • js实现省市级联效果分享

    本文实例为大家分享了js实现省市级联效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript"> var shengArr =new Array(); shengArr[&qu

  • javascript基于DOM实现省市级联下拉框的方法

    本文实例讲述了javascript基于DOM实现省市级联下拉框的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>省市级联下拉框</title

  • jquery调取json数据实现省市级联的方法

    本文实例讲述了jquery调取json数据实现省市级联的方法.分享给大家供大家参考.具体如下: 使用jQuery mobile作为创建移动web的框架,需要实现省市级联的功能,具体代码如下(还需要优化的地方): Html代码: jQuery mobile中,有input  list属性,下方紧跟<datalist >标签,中间包含的<option value="XXXX"></option>即为选项,相当于这个input为有下拉列表的功能,当然,in

  • jQuery调取jSon数据并展示的方法

    本文实例讲述了jQuery调取jSon数据并展示的方法.分享给大家供大家参考.具体如下: 以下代码是将页面中的展示部分 复制代码 代码如下: function searchProductlistByfilterCondition(index, type, sort, filterWord) {      //cite_html      var citem_html = '<div class="citem"><div class="citemtop&quo

  • jQuery对JSON数据进行排序输出的方法

    本文实例讲述了jQuery对JSON数据进行排序输出的方法.分享给大家供大家参考.具体实现方法如下: $.getJSON('URl',function(data){ data.sort(function(a,b){return a.demoname-b.demoname}); for(i=0;i<data.length;i++){ alert(data[i].demoname) } }) 希望本文所述对大家的jQuery程序设计有所帮助.

  • jQuery解析json数据实例分析

    jQuery解析json数据实例分析

    本文实例分析了jQuery解析json数据的方法.分享给大家供大家参考,具体如下: 先来看看我们的Json数据格式: [ {id:01,name:"小白",old:29,sex:"男"}, {id:02,name:"小蓝",old:29,sex:"男"}, {id:03,name:"小雅",old:29,sex:"男"} ] 为了消除乱码问题,我们设置一个过滤器(代码片段) public

  • jQuery ajax json 数据的遍历代码

    先给大家说下我的需求:进行ajax请求后,后台传递回来以下json数据. 具体实现代码如下所示: JavaScript代码 { "data":[ {"id":"1","name":"选择A","value":"A"}, {"id":"2","name":"选择B","value&

  • Jquery遍历Json数据的方法

    本文实例讲述了Jquery遍历Json数据的方法.分享给大家供大家参考.具体如下: <html> <head> <title>jQuery遍历json</title> <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script> </head> <script> var a = { "

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

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

  • jquery解析JSON数据示例代码

    这里可以找到json.js的代码,后面还需要formutil.js的代码及MD5.js 用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里首先给出JSON字符串集,字符串集如下: 代码如下: 复制代码 代码如下: var data=" { root: [ {name:'1',value

  • jQuery处理json数据返回数组和输出的方法

    本文实例讲述了jQuery处理json数据返回数组和输出的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: /*print the json object  *  *$("selector").print_r_json(json,opts) : return formatted string (and print)  *sprint_r_json : just return the string;  *print_r_json : return the format

  • jQuery中ajax请求后台返回json数据并渲染HTML的方法

    html实例 <table border="0" class="restaurant_food" cellspacing="0" cellpadding="1"> <input type="text" name="dishes" value="" class="seek_product" placeholder="请输入

随机推荐