• 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>
  • 相关阅读:
    关于多工序生产中损耗的计算
    ERP相关术语
    linux下如何挂载U盘
    linux boot下的文件
    MPLS简述
    BGP
    linux添加新磁盘
    列表的方法
    python之列表
    python之模块初识-os模块
  • 原文地址:https://www.cnblogs.com/zqifa/p/jquery-select-1.html
Copyright © 2020-2023  润新知