基于jquery实现二级联动效果

2019-11-19 16:58:50

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )

下一篇：javascript中的面向对象