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>

 


免責聲明!

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