jQuery 簡單實現select二級聯動


因項目需要開發一個簡單的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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。