基于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获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jQuery实现简单轮播图效果
Dec 27 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
第六节 访问属性和方法 [6]
2006/10/09 PHP
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
python实现的重启关机程序实例
2014/08/21 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
django ajax json的实例代码
2018/05/29 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
怎样在程序里获得一个空指针
2015/01/24 面试题
护理自我鉴定范文
2013/10/06 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
物流管理专业求职信
2014/05/29 职场文书
机电专业求职信
2014/06/14 职场文书
计划生育工作总结2015
2015/04/03 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书