<%@ 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>
分享到：
相关推荐
在这个案例中，“利用JS与HTML实现地级市的简易的二级联动”就是这样一个功能，它允许用户首先选择省份，然后根据省份选择相应的地级市。 首先，我们需要理解HTML的基础结构。HTML（超文本标记语言）是构建网页内容...
这是一个基于Vue2的简易省市区县三级联动组件，可以控制只显示省级或只显示省市两级，可设置默认值等。提供原始省市县代码和名称数据，适用于各种有关城市区县的应用。 安装 我们使用npm安装： npm install v-...
我们的省市区县的数据源来自本站文章 《基于Vue2的简易的省市区县三级联动组件》 中的districts.js，感谢 v-distpicker 作者。districts.js中的数据格式大概是这样的： export default { 100000: { 110000: '北京...
10-22 5 ajax应用 省市联动 10-22 6 ajax应用 黄金市场报价 10-23 1 简易在线聊天室1 10-23 2 简易在线聊天室2 10-23 3 简易在线聊天室3 10-23 4 简易在线聊天室4 10-23 5 简易在线聊天室5 10-23 6 简易在线聊天室6 ...
10-22 5 ajax应用 省市联动 10-22 6 ajax应用 黄金市场报价 10-23 1 简易在线聊天室1 10-23 2 简易在线聊天室2 10-23 3 简易在线聊天室3 10-23 4 简易在线聊天室4 10-23 5 简易在线聊天室5 10-23 6 简易在线聊天室6 ...
10-22 5 ajax应用 省市联动 10-22 6 ajax应用 黄金市场报价 10-23 1 简易在线聊天室1 10-23 2 简易在线聊天室2 10-23 3 简易在线聊天室3 10-23 4 简易在线聊天室4 10-23 5 简易在线聊天室5 10-23 6 简易在线聊天室6 ...
10-22 5 ajax应用 省市联动 10-22 6 ajax应用 黄金市场报价 10-23 1 简易在线聊天室1 10-23 2 简易在线聊天室2 10-23 3 简易在线聊天室3 10-23 4 简易在线聊天室4 10-23 5 简易在线聊天室5 10-23 6 简易在线聊天室6 ...
10-22 5 ajax应用 省市联动 10-22 6 ajax应用 黄金市场报价 10-23 1 简易在线聊天室1 10-23 2 简易在线聊天室2 10-23 3 简易在线聊天室3 10-23 4 简易在线聊天室4 10-23 5 简易在线聊天室5 10-23 6 简易在线聊天室6 ...