jquery实现select二级联动

jquery实现一个简单的select二级联动菜单,代码如下

 

 

复制代码
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>jQuery 二级联动</title>
 6     <style>
 7         .city{
 8             display: none;;
 9         }
10         .city_first {
11             display: block;
12         }
13     </style>
14     <script src="jquery/jquery-1.11.3.min.js"></script>
15     <script>
16         $(document).ready(function(){
17             $("#province").change(function(){
18                 var index = $(this).get(0).selectedIndex;
19                 $('.city').hide().eq(index).show();
20             });
21         });
22     </script>
23 </head>
24 <body>
25 <select id="province">
26     <option>----请选择省份----</option>
27     <option>北京</option>
28     <option>上海</option>
29     <option>江苏</option>
30 </select>
31 <select class="city city_first">
32     <option>----请选择城市----</option>
33 </select>
34 
35 <select class="city">
36     <option>----请选择城市----</option>
37     <option>东城</option>
38     <option>西城</option>
39     <option>崇文</option>
40     <option>宣武</option>
41     <option>朝阳</option>
42 </select>
43 <select class="city">
44     <option>----请选择城市----</option>
45     <option>黄浦</option>
46     <option>卢湾</option>
47     <option>徐汇</option>
48     <option>长宁</option>
49     <option>静安</option>
50 </select>
51 <select class="city">
52     <option>----请选择城市----</option>
53     <option>南京</option>
54     <option>镇江</option>
55     <option>苏州</option>
56     <option>南通</option>
57     <option>扬州</option>
58 </select>
59 </body>
60 </html>
复制代码

 

posted on   zqifa  阅读(17900)  评论(0编辑  收藏  举报

编辑推荐:
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
阅读排行:
· DeepSeek V3 两周使用总结
· 回顾我的软件开发经历(1)
· C#使用yield关键字提升迭代性能与效率
· 低成本高可用方案!Linux系统下SQL Server数据库镜像配置全流程详解
· 4. 使用sql查询excel内容

导航

< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示