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


Posted in Javascript onJanuary 29, 2015

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

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

Javascript 相关文章推荐
jQuery实现表头固定效果的实例代码
May 24 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
RequireJS用法简单示例
Aug 20 Javascript
react配置antd按需加载的使用
Feb 11 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
JavaScript中实现单体模式分享
Jan 29 #Javascript
angular简介和其特点介绍
Jan 29 #Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 #Javascript
浅谈javascript中自定义模版
Jan 29 #Javascript
jQuery和AngularJS的区别浅析
Jan 29 #Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 #Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 #Javascript
You might like
PHP利用str_replace防注入的方法
2013/11/10 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
php xhprof使用实例详解
2019/04/15 PHP
javascript 一些用法小结
2009/09/11 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
Python数据结构之Array用法实例
2014/10/09 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
wxPython实现整点报时
2019/11/18 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
陈欧广告词
2014/03/14 职场文书
安全责任书范本
2014/04/15 职场文书
个人借款协议书范本
2014/11/17 职场文书
三八妇女节慰问信
2015/02/14 职场文书
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android