zoukankan      html  css  js  c++  java
  • JavaScript 省市级联效果

    JavaScript 省市级联效果

     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     <title>省市级联效果</title>
     5 
     6     <script type="text/javascript">
     7         function show() {
     8             var citys = new Array();
     9             citys["湖北省"] = ["襄樊市", "武汉市", "随州市", "荆门市", "黄石市", "恩施市", "咸宁市", "仙桃市", "十堰市", "孝感市", "利川市"];
    10             citys["湖南省"] = ["长沙市", "吉首市", "湘潭市", "益阳市", "津市市", "洪江市", "怀化市", "冷水江市", "衡阳市", "郴州市", "永州市", "邵阳市", "岳阳市"];
    11             citys["广东省"] = ["广州市", "深圳市", "佛山市", "汕头市", "珠海市", "韶关市", "江门市", "湛江市", "惠州市", "中山市", "东莞市"];
    12             citys["北京市"] = ["朝阳区", "丰台区", "崇文区", "宣武区", "海淀区", "顺义区", "平谷区", "怀柔区", "房山区", "东城区", "西城区"];
    13 
    14             document.getElementById("shi").options.length = 1;
    15             var sheng = document.getElementById("sheng").value;
    16             var newCity;
    17             if (sheng != "-=请选择=-") {
    18                 for (var i = 0; i < citys[sheng].length; i++) {
    19                     newCity = new Option(citys[sheng][i], citys[sheng][i]);
    20                     document.getElementById("shi").options.add(newCity);
    21                 }
    22             }
    23         }
    24     
    25     </script>
    26 
    27 </head>
    28 <body>
    29     <div>
    30         <select id="sheng" onchange="show()">
    31             <option value="-=请选择=-">-=请选择=-</option>
    32             <option value="湖北省">湖北省</option>
    33             <option value="湖南省">湖南省</option>
    34             <option value="广东省">广东省</option>
    35             <option value="北京市">北京市</option>
    36         </select>
    37         <select id="shi">
    38             <option>-=请选择=-</option>
    39         </select>
    40     </div>
    41 </body>
    42 </html>
  • 相关阅读:
    OO第四单元单元总结
    OO第三单元单元总结
    OO第二单元单元总结
    OO第一单元单元总结
    Java虚拟机解释器与编译器
    20155321 《Java程序设计》实验三 敏捷开发与XP实践
    20155321 2016-2017-2 《Java程序设计》第十周学习总结
    20155321 2016-2017-2 《Java程序设计》第九周学习总结
    20155321实验二 Java面向对象程序设计
    20155321 2016-2017-2 《Java程序设计》第八周学习总结
  • 原文地址:https://www.cnblogs.com/hzdx/p/3438742.html
Copyright © 2011-2022 走看看