js编写三级联动简单案例


Posted in Javascript onDecember 21, 2016

刚给学妹写了个简单的地区的三级联动简单案例,分享给正在学习的朋友参考下

<html>
 <head>
 <!--导入jquery-->
 <script type="text/javascript"src="jquery1.7.1.js"></script>
 </head>
<script type="text/javascript">
 $(function(){//页面加载
  loaddata('gj','国家的请求url','查所有id随便给反正后台不需要','省份','国家');//查询所有国家,并加载到国家下拉框中

  $("#gj").change(function(){//国家的值改变事件
   loaddata('sf','省份的请求url','国家id','省份');//查询当前国家下的所有省份,并加载到省份下拉框中
  }

  $("#sf").change(function(){//省份的值改变事件
   loaddata('sj','省份的请求url','省份id','市级');//查询当前省份下的所有市,并加载到市下拉框中
  }
 });
 //数据加载
 function loaddata(eleid,url,id,type){
  $.ajax({ 
   type:'get', 
   url:url, 
   data:{id:id}//参数
   success:function(data){ 
    if(type=='国家'){//如果是国家

     $("#"+eleid).html("");//先清空国家
     $("#sf").html("");//再清空省份
     $("#sj").html("");//最后清空市
    }else if(type=='省份'){//如果是省

     $("#"+eleid).html("");//先清空省份
     $("#sj").html("");//再后清空市

    }else if(type=='市级'){//如果是市级

     $("#"+eleid).html("");//清空市
    }
   $("#"+eleid).append('<option>请选择</option>');

  //需要注意的是如果后台传来的data数据不一致,需先转换再遍历
   for(var i=0;i<data.length;i++){//再加载数据
     $("#"+eleid).append('<option value="'+data.选择的值+'">'+data.显示的值+'</option>');//加载数据
   }
   },error:function(){ 
   //请求出错处理 
   } 
  }); 
 }
</script>

<body>
 <select id="gj">
  <option>请选择</option>
 </select>
 <select id="sf">
  <option>请选择</option>
 </select>
 <select id="sj">
  <option>请选择</option>
 </select>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js模拟类继承小例子
Jul 17 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
浅析node应用的timing-attack安全漏洞
Feb 28 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 #Javascript
js返回顶部实例分享
Dec 21 #Javascript
JS实现的系统调色板完整实例
Dec 21 #Javascript
基于jPlayer三分屏的制作方法
Dec 21 #Javascript
js实现的简练高效拖拽功能示例
Dec 21 #Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 #Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 #Javascript
You might like
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
树结构之JavaScript
2017/01/24 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
详解webpack介绍&amp;安装&amp;常用命令
2017/06/29 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
python 控制语句
2011/11/03 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
平民服装店创业计划书
2014/01/17 职场文书
篝火晚会主持词
2014/03/25 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
大学生社会实践评语
2014/04/25 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
感恩教育观后感
2015/06/17 职场文书
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python