基于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 Plupload上传插件的使用
Apr 19 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 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
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
js 格式化时间日期函数小结
2010/03/20 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
ES6中的类(Class)示例详解
2020/12/09 Javascript
jQuery实现本地存储
2020/12/22 jQuery
Vue看了就会的8个小技巧
2021/01/21 Vue.js
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
python实现读取并显示图片的两种方法
2017/01/13 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
python检测IP地址变化并触发事件
2018/12/26 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
python pycharm的安装及其使用
2019/10/11 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
Python3 assert断言实现原理解析
2020/03/02 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
CSS3实现时间轴特效
2020/11/02 HTML / CSS
蛋糕店的商业计划书范文
2014/01/27 职场文书
军训自我鉴定200字
2014/02/13 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
个人担保书格式范文
2014/05/12 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书