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="提交" onclick="onSelect()"/>
    </form>
  </body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值