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 相关文章推荐
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
浅析js中的浮点型运算问题
Jan 06 Javascript
jquery map方法使用示例
Apr 23 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
JavaScript监听触摸事件代码实例
Dec 30 Javascript
javascript中Set、Map、WeakSet、WeakMap区别
Dec 24 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实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
python中OrderedDict的使用方法详解
2017/05/05 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
运行时异常与一般异常有何异同?
2014/01/05 面试题
C/C++程序员常见面试题一
2012/12/08 面试题
爷爷追悼会答谢词
2014/01/24 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
婚前协议书
2014/04/15 职场文书
运动会入场口号
2014/06/07 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
大学生创业计划书
2019/06/24 职场文书
MySQL COUNT函数的使用与优化
2021/05/10 MySQL
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers
Python使用openpyxl模块处理Excel文件
2022/06/05 Python