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 相关文章推荐
javascript取消文本选定的实现代码
Nov 14 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 Javascript
详解Typescript里的This的使用方法
Jan 08 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
PHP 防注入函数(格式化数据)
2011/08/08 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
Python编写屏幕截图程序方法
2015/02/18 Python
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
Python 学习教程之networkx
2019/04/15 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
南威尔士家居商店:Leekes
2016/10/25 全球购物
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
化妆品店促销方案
2014/02/24 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
工地安全标语
2014/06/07 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
医院护士工作检讨书
2014/10/26 职场文书
小学语文复习计划
2015/01/19 职场文书
感谢信模板大全
2015/01/23 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
这样写python注释让代码更加的优雅
2021/06/02 Python