<%@ 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>
分享到：
相关推荐
2. **AJAX技术**：实现省市联动的关键是AJAX（异步JavaScript和XML），它可以发送异步HTTP请求到服务器，获取数据而无需刷新整个页面。在这个项目中，JavaScript通过AJAX向服务器请求当前省份的子级城市数据。 3. *...
在JavaScript编程中，实现省市区三级联动是一种常见的需求，尤其在构建动态网页和Web应用程序时。这个功能允许用户在选择省份后，市和区的选择会根据省份自动更新，提供更流畅的用户体验。以下是对这个主题的详细...
一个自己写的，非常全面的xml与JS实现省市联动菜单，让你更加方便了解该内容
在省市联动的实现中，Servlet充当了后端数据处理的角色，它获取到前端发送的请求（如省份选择），然后查询数据库以获取对应城市的列表。 接下来，AJAX（Asynchronous JavaScript and XML）是一种在不刷新整个页面的...
总之，js省市联动菜单的实现是一个典型的前端交互案例，它展示了JavaScript在处理动态数据和用户交互方面的强大能力。通过学习和实践这类功能，开发者可以提升在网页动态化和用户体验优化方面的技能。
下面我们将深入探讨如何使用JavaScript实现省市区联动。 首先，我们需要一个数据结构来存储省市区的层级关系。这个数据结构可以是一个嵌套的对象数组，每个对象代表一个地区，包含其ID、名称以及子地区的数组。例如...
本文主要介绍了使用 JavaScript 二维数组实现省市联动菜单的方法。该方法通过二维数组存储城市列表项，并使用 JavaScript 代码来实现省市联动菜单的功能。 知识点 1: JavaScript 二维数组 在 JavaScript 中，二维...
标题中的“省市联动jQuery+Struts2”是指在Web开发中使用jQuery库和Struts2框架实现的一个功能，即当用户选择一个省份时，相关的城市会动态地在下拉列表中加载出来，提供用户选择。这个功能在很多需要收集用户地址...
通过以上步骤，我们可以利用JavaScript实现一个高效、灵活的移动端省市区三级联动选择器。在实际项目中，还可以结合前端框架（如Vue、React等）或第三方库（如jQuery UI）来简化开发过程，提高代码的可维护性和可...
在这个例子中，"js实现三级联动展现"，我们看到JavaScript是实现这种动态效果的关键。JavaScript是一种客户端脚本语言，它允许我们在用户与网页交互时执行代码，更新页面内容。在这种情况下，JavaScript负责监听第一...
总之，这段代码示例展示了如何利用JavaScript实现网页上的省市联动功能，不仅增强了用户体验，还提高了数据输入的准确性和效率。对于开发者而言，理解和掌握这类功能的实现原理，有助于提升Web应用程序的交互性和...
全国省市区地址下拉框二级、三级联动选择html例子，JS本地实现，无需网络就能使用，数据为国家省市区6位标准编码，二级联动为省、市的下拉框选择，三级联动为省、市、区的下拉框选择，效果请打开压缩包中的html页面...
本话题聚焦于“jquery + servlet实现省市联动二级菜单”这一技术实践，这是一个常见的前端与后端协同工作的场景，主要用于提升用户体验，使得用户在选择省份时，市一级的下拉菜单能实时更新为相应省份的城市。...
前端省市联动是一种常见的前端交互方式，它通过联动省份和城市列表，让用户更便捷地选择所在地区。这种交互方式常被应用在以下场景： 1.注册/登录页面：用户在填写个人信息时，需要选择所在地区，省市联动可以让用户...
标题中的"js省市联动"指的是在前端开发中，使用JavaScript实现省市区选择框的联动效果。这是一种常见的功能，用户在选择省份时，市、区的选择框会根据所选省份动态更新选项，提供与省份相关联的下级行政区域供用户...
在实现省市联动的过程中，开发者通常会使用JavaScript（如jQuery、Vue.js、React.js等）进行前端的交互逻辑编写，利用Ajax异步请求获取服务器上的数据。后端可以采用PHP、Python、Java等服务器语言，配合数据库（如...
本文件是uni-app实现省市区三级联动中的data.js文件，详情见博客：https://whhtjl.blog.csdn.net/article/details/109216246
移动端+JS+省市区三级联动
在本教程中，我们将深入探讨如何使用JavaScript来实现省市联动的效果。这种效果常见于许多网站的地址选择器中，当你选择一个省份时，相应的城市列表会自动更新。这个功能能够提高用户体验，使得用户在填写信息时更加...