基于jquery实现二级联动效果


Posted in jQuery onMarch 30, 2017

本文实例为大家分享了jquery实现二级联动的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
   <title>二级联动</title>
   <script src="http://apps.bdimg.com/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("#province").change(function(){
       $("#province option").each(function(i,o){
          if($(this).attr("selected"))
          {
           $(".city").hide();
           $(".city").eq(i).show();
         }
       });
      });
    $("#province").change();
   });
</script>
</head>
<body>
   <select id="province">
    <option>----请选择省份----</option>
    <option>北京</option>
   <option>上海</option>
    <option>江苏</option>
  </select>
  <select class="city">
      <option>----请选择城市----</option>
  </select>
  <select class="city">
    <option>东城</option>
    <option>西城</option>
    <option>崇文</option>
    <option>宣武</option>
    <option>朝阳</option>
  </select> 
<select class="city">
    <option>黄浦</option>
    <option>卢湾</option>
    <option>徐汇</option>
    <option>长宁</option>
    <option>静安</option>
  </select>
  <select class="city">
    <option>南京</option>
    <option>镇江</option>
    <option>苏州</option>
    <option>南通</option>
    <option>扬州</option>
  </select>
</body>
</html>

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

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
基于jQuery实现文字打印动态效果
Apr 21 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
jquery中关于bind()方法的使用技巧分享
Mar 30 #jQuery
如何编写jquery插件
Mar 29 #jQuery
jQuery日程管理控件glDatePicker用法详解
Mar 29 #jQuery
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 #jQuery
jQuery实现的手风琴侧边菜单效果
Mar 29 #jQuery
jQuery实现字体颜色渐变效果的方法
Mar 29 #jQuery
jquery实现tab键进行选择后enter键触发click行为
Mar 29 #jQuery
You might like
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
python2.7的编码问题与解决方法
2016/10/04 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
医学求职自荐信
2014/06/21 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
开场白怎么写
2015/06/01 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
Python面试不修改数组找出重复的数字
2022/05/20 Python