基于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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
使用jQuery实现掷骰子游戏
Oct 24 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
escape unescape的php下的实现方法
2007/04/27 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
php use和include区别总结
2019/10/13 PHP
如何在Laravel之外使用illuminate组件详解
2020/09/20 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
python中模块查找的原理与方法详解
2017/08/11 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
Python的UTC时间转换讲解
2019/02/26 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
python 标准差计算的实现(std)
2019/07/29 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
高校自主招生自荐信
2013/12/09 职场文书
产品包装策划方案
2014/05/18 职场文书
奥运会口号
2014/06/13 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
法人授权委托书范本
2014/09/17 职场文书
公司介绍信范文
2015/01/31 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书