zoukankan      html  css  js  c++  java
  • 《省市联动功能菜单的实现》

            相信大家在项目中应该都有遇到过浙江省温州市等这样的省市地区的联动功能的菜单,一般这个在会员注册那里会用的比较多,以前做过一个Ajax版本的省市联动,但是这次由于项目准备还是在Asp平台上运作,所以想都没想,只能用Js去实现了。

           随意在Baidu中搜索到了以下的代码:

    <html>
    <head>
    <title></title>
    <script language="javascript" type="text/javascript">
    //定义 城市 数据数组
    cityArray = new Array();
    cityArray[0] = new Array("河南省","郑州市|开封市|洛阳市|平顶山市|安阳市|鹤壁市|新乡市|焦作市|濮阳市|许昌市|漯河市|三门峡市|南阳市|商丘市|信阳市|周口市|驻马店市|济源市");
    cityArray[1] = new Array("云南省","昆明市|大理市|曲靖市|玉溪市|昭通市|楚雄市|红河市|文山市|思茅市|西双版纳市|保山市|德宏市|丽江市|怒江市|迪庆市|临沧市");
    cityArray[2] = new Array("其它","其它");

    function getCity(currProvince)
    {
    //当前 所选择 的 省
    var currProvince = currProvince;
    var i,j,k;
    //清空 城市 下拉选单
    document.all.selCity.length = 0 ;
    for (i = 0 ;i <cityArray.length;i++)
    {
    //得到 当前省 在 城市数组中的位置
    if(cityArray[i][0]==currProvince)
    {
    //得到 当前省 所辖制的 地市
    tmpcityArray = cityArray[i][1].split("|")
    for(j=0;j<tmpcityArray.length;j++)
    {
    //填充 城市 下拉选单
    document.all.selCity.options[document.all.selCity.length] = new Option(tmpcityArray[j],tmpcityArray[j]);
    }
    }
    }
    }
    </script>
    </head>
    <body>
    <form id="form1">
    <select id="selProvince" onChange = "getCity(this.options[this.selectedIndex].value)">
    <option value="">-请选择-</option>
    <option value="河南省">河南省</option>
    <option value="云南省">云南省</option>
    <option value="其它">其它</option>
    </select>

    <select id="selCity">
    <option>-城市-</option>
    </select>
    </form>
    </body>
    </html>


    放在这里收藏下吧,以后肯定应该还是用的到的,有一点这里由于Select没有Name值,所以需要我们自己加上,否则在Asp下面的request是获取不了值的。

  • 相关阅读:
    JVM学习笔记-方法区(Method Area)
    JVM学习笔记-类型信息(Type Information)
    JVM学习笔记-常量池(Constant Pool)
    JVM学习笔记-字段信息(Field Information)
    hive schematool -initSchema -dbType mysql 报错
    flink error: Exception in thread "main" java.lang.NoClassDefFoundError
    python error: TypeError: cannot serialize '_io.TextIOWrapper' object
    multiprocessing.Pool 捕获error
    sysdig 安装与使用(转载)
    sonatype nexus简介(转)
  • 原文地址:https://www.cnblogs.com/Apollo/p/708101.html
Copyright © 2011-2022 走看看