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 相关文章推荐
JavaScript下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
javascript实现的HashMap类代码
Jun 27 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
js随机生成26个大小写字母
Feb 12 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
javascript实现简易的计算器
Jan 17 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加密解密示例分享
2014/01/29 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
php实现微信支付之退款功能
2018/05/30 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python 剪切移动文件的实现代码
2018/08/02 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
python实现AES加密与解密
2019/03/28 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
Python跳出多重循环的方法示例
2019/07/03 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
奥地利网上书店:Weltbild
2017/07/14 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
品质保证书格式
2015/02/28 职场文书
道歉的话怎么说
2015/05/12 职场文书
消费者理赔投诉书
2015/07/02 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
导游词之西递宏村
2019/12/10 职场文书