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 相关文章推荐
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
jquery中ajax学习笔记4
Oct 16 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
jQuery中clone()方法用法实例
Jan 16 Javascript
javascript查询字符串参数的方法
Jan 28 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
vue项目中axios使用详解
Feb 07 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 文件上传全攻略
2010/04/28 PHP
php的urlencode()URL编码函数浅析
2011/08/09 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
PHP数组实例详解
2016/06/26 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
深入解析Python中的上下文管理器
2016/06/28 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
业务部主管岗位职责
2014/01/29 职场文书
竞选班长自荐书范文
2014/03/09 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
跳蚤市场口号
2014/06/13 职场文书
大学毕业生推荐信
2014/07/09 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
二手车转让协议书
2015/01/29 职场文书
小学六一主持词开场白
2015/05/28 职场文书
创业计划书之冷饮店
2019/09/27 职场文书