zoukankan      html  css  js  c++  java
  • js 省市下拉列表联动

    1.定义 城市 数据数组
    2.得到 当前 所选择 的 省
    3.得到 当前省 在 城市数组中的位置
    4.得到 当前省 所辖制的 地市
    5.填充 城市 下拉选单
    ----------
    示例代码如下
    <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>
  • 相关阅读:
    Axure 实现数字自动加键功能(点击“+”数字加1,点击“-”数字减1)
    Axure 实现批量的勾选和反选
    传说中的AutoCAD公司
    Autodesk 最新开发技术研讨会-北京-上海-武汉-成都-西安-PPT下载
    发布App,赢iPad mini + 美金100$
    无插件的大模型浏览器Autodesk Viewer开发培训-武汉-2014年8月28日 9:00 – 12:00
    为Autodesk Viewer添加自定义工具条的更好方法
    为Autodesk Viewer添加自定义工具条
    Autodesk 最新开发技术研讨会 -8月22日-Autodesk北京办公室
    请保护我们的地球
  • 原文地址:https://www.cnblogs.com/freeliver54/p/597625.html
Copyright © 2011-2022 走看看