基于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封装的分页组件
Jun 26 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 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 分页原理分析,大家可以看看
2009/12/21 PHP
php &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
PHP隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
php使用GeoIP库实例
2014/06/27 PHP
php常量详细解析
2015/10/27 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
小程序实现tab标签页
2020/11/16 Javascript
python爬虫常用的模块分析
2014/08/29 Python
讲解Python中的递归函数
2015/04/27 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
Python提取频域特征知识点浅析
2019/03/04 Python
详解Django admin高级用法
2019/11/06 Python
想学画画?python满足你!
2020/12/24 Python
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
什么是索引指示器
2012/08/20 面试题
12月小学生校园广播稿
2014/02/04 职场文书
2014年仓库工作总结
2014/11/20 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android