0
点赞
收藏
分享

微信扫一扫

js实现简易省市联动

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
 <%
 String path = request.getContextPath();
 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 %>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
   <head>
     <base href="<%=basePath%>">
     
     <title>省市联动js版</title>
     
     <meta http-equiv="pragma" content="no-cache">
     <meta http-equiv="cache-control" content="no-cache">
     <meta http-equiv="expires" content="0">    
     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
     <meta http-equiv="description" content="This is my page">
    <script type='text/javascript' src='js/jquery-latest.js'></script> 
     <script type="text/javascript" language="javascript">
     function change()
     {
         var cityList=new Array();
         cityList['空']=['请选择城市'];
         cityList['湖北']=['请选择城市','武汉','宜昌','荆州'];
         cityList['湖南']=['请选择城市','长沙','湘潭','怀化'];
         cityList['安徽']=['请选择城市','合肥','淮南','安庆','六安'];
         var index=document.myForm.pro.value;//当pro改变时,获取pro选中的value
         document.myForm.city.options.length=0;
         for(var i in cityList[index]){//遍历pro选中的value所对应的数组
             document.myForm.city.options.add(new Option(cityList[index][i],cityList[index][i]));//向city中添加选项,选项为(数组[省份名][数组下标])
         }
         
     }
     function onSelect()
     {
       alert($("#pro").find("option:selected").text());//得到被选中的省份
       alert($("#city").find("option:selected").text());//得到被选中的城市
     }
         
     </script>

   </head>
   
   <body>
     <form name="myForm" method="post">
     <select id="pro" name="pro" onChange="change()" >
     <option value="空">请选择省份</option>
     <option value="湖北">湖北省</option>
     <option value="湖南">湖南省</option>
     <option value="安徽">安徽省</option>
     </select>
     <select id="city" name="city">
     <option>请选择城市</option>
     </select>
     <input type="submit" value="提交" οnclick="onSelect()"/>
     </form>
   </body>
 </html>

举报

相关推荐

0 条评论