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读取cookies)
Jan 11 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
js实现微信聊天界面
Aug 09 Javascript
JavaScript实现简单验证码
Aug 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
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
php实现aes加密类分享
2014/02/16 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
Python 递归函数详解及实例
2016/12/27 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
Python中偏函数用法示例
2018/06/07 Python
设置python3为默认python的方法
2018/10/31 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
C# .NET面试题
2015/11/28 面试题
财务管理职业生涯规划书
2014/02/26 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
家长会欢迎词
2015/01/23 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
Python 数据可视化之Seaborn详解
2021/11/02 Python
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL