基于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 06 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jquery实现点击左右按钮切换图片
Jan 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
php基础学习之变量的使用
2011/06/09 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
js切换光标示例代码
2013/10/10 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
2018/08/07 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
毕业自我鉴定范文
2013/11/06 职场文书
分公司经理岗位职责
2013/11/11 职场文书
数学国培研修感言
2014/02/13 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
详解Python flask的前后端交互
2022/03/31 Python