基于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表单验证之密码确认
May 22 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jquery实现有过渡效果的tab切换
Jul 17 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 的 __FILE__ 常量
2007/01/15 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
js实现随机点名功能
2020/12/23 Javascript
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
python开发之thread线程基础实例入门
2015/11/11 Python
python实现自主查询实时天气
2018/06/22 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
python numpy数组复制使用实例解析
2020/01/10 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
白酒市场开发计划书
2014/01/09 职场文书
银行实习生的自我评价
2014/01/13 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
小学班主任事迹材料
2014/12/17 职场文书
给客户的感谢信
2015/01/21 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
聊聊Python String型列表求最值的问题
2022/01/18 Python