您的位置：首页 > Web前端 > JQuery

jQuery 简单实现select二级联动

2016-10-07 21:56 597 查看
因项目需要开发一个简单的select二级联动菜单，代码如下

演示地址：http://www.haonanwang.com/haonan/demo/select.html

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>jQuery 二级联动</title>
6 <script src="jquery-1.3.2.js" type="text/javascript"></script>
7 <script type="text/javascript">
8        $(document).ready(function(){
9            $("#province").change(function(){
10                $("#province option").each(function(i,o){
11                    if($(this).attr("selected"))
12                    {
13                        $(".city").hide();
14                        $(".city").eq(i).show();
15                    }
16                });
17            });
18            $("#province").change();
19        });
20 </script>
21 </head>
22 <body>
23    <select id="province">
24        <option>----请选择省份----</option>
25        <option>北京</option>
26        <option>上海</option>
27        <option>江苏</option>
28    </select>
29    <select class="city">
30            <option>----请选择城市----</option>
31    </select>
32    <select class="city">
33        <option>东城</option>
34        <option>西城</option>
35        <option>崇文</option>
36        <option>宣武</option>
37        <option>朝阳</option>
38    </select>
39    <select class="city">
40        <option>黄浦</option>
41        <option>卢湾</option>
42        <option>徐汇</option>
43        <option>长宁</option>
44        <option>静安</option>
45    </select>
46    <select class="city">
47        <option>南京</option>
48        <option>镇江</option>
49        <option>苏州</option>
50        <option>南通</option>
51        <option>扬州</option>
52    </select>
53 </body>
54 </html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航