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 相关文章推荐
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
layui实现显示数据表格、搜索和修改功能示例
Jun 03 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模拟SQL Server的两个日期处理函数
2006/10/09 PHP
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
php反弹shell实现代码
2009/04/22 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
正规欠条模板
2015/07/03 职场文书
学校运动会感想
2015/08/10 职场文书
JavaScript实现登录窗体
2021/06/22 Javascript