zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    CF 142B Tprimes
    CF 231A Team
    poj 2001 Shortest Prefixes ——字典树入门
    hdu 1039 Easier Done Than Said?
    poj 2528 Mayor's posters
    hdu 1061 Rightmost Digit
    poj 2503 Babelfish
    CF271 A. Beautiful Year
    poj 2752
    CF271 B. Prime Matrix
  • 原文地址:https://www.cnblogs.com/zqifa/p/jquery-select-1.html
Copyright © 2011-2022 走看看