<%@ 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>
分享到：
相关推荐
PHP开发过程中经常使用到省市联动js，但是使用一般的js省市联动时提交的一般是汉字，...所以这次本人根据一个省市数据库，写了一个js省市联动的，资源里包括数据库文件，这样就不用担心查询时没法把省市id转换成中文了
一个自己写的，非常全面的xml与JS实现省市联动菜单，让你更加方便了解该内容
在省市联动的实现中，Servlet充当了后端数据处理的角色，它获取到前端发送的请求（如省份选择），然后查询数据库以获取对应城市的列表。 接下来，AJAX（Asynchronous JavaScript and XML）是一种在不刷新整个页面的...
【Ajax实现省市联动】是一种常见的前端交互功能，它在用户选择省份时自动更新下拉框中的城市选项，提供无缝的用户体验。这个功能的核心是利用Ajax（异步JavaScript和XML）技术，结合HTML、CSS和JavaScript进行页面...
下面我们将深入探讨如何使用JavaScript实现省市区联动。 首先，我们需要一个数据结构来存储省市区的层级关系。这个数据结构可以是一个嵌套的对象数组，每个对象代表一个地区，包含其ID、名称以及子地区的数组。例如...
在网页设计和开发中，Ajax（Asynchronous JavaScript and XML）技术是一种非常...理解并掌握Ajax实现省市联动效果，对于前端开发者来说是必备的技能之一，它不仅提升了用户体验，也是现代Web开发中不可或缺的一部分。
至此，我们就完成了省市联动的基本实现。这个例子展示了jQuery如何与HTML元素交互，以及如何使用JavaScript处理用户事件。值得注意的是，这里的数据是硬编码的，如果需要动态获取数据，可以考虑从JSON文件或API接口...
本插件是纯JavaScript实现，不依赖任何外部库，如jQuery，这使得它具有轻量级、易集成的特点。 首先，我们要理解什么是省市联动。省市联动是指在网页上设置三个下拉框，分别对应省、市、区，当用户在第一个下拉框...
标题中的“jQuery实现省市联动”是指在Web应用中，通过jQuery库来实现在选择省份时，下拉框（或其它选择组件）中的城市选项能够自动更新，以展示与所选省份对应的城市列表。这种功能常见于地址输入或者注册表单中，...
在这个“简单的省市联动效果”中，我们主要关注的是JavaScript（js）技术的应用。 JavaScript是一种广泛使用的客户端脚本语言，它在网页中可以动态地处理数据和控制用户的交互。在省市联动效果中，JavaScript的主要...
通过以上步骤，我们可以利用JavaScript实现一个高效、灵活的移动端省市区三级联动选择器。在实际项目中，还可以结合前端框架（如Vue、React等）或第三方库（如jQuery UI）来简化开发过程，提高代码的可维护性和可...
总之，这段代码示例展示了如何利用JavaScript实现网页上的省市联动功能，不仅增强了用户体验，还提高了数据输入的准确性和效率。对于开发者而言，理解和掌握这类功能的实现原理，有助于提升Web应用程序的交互性和...
Province City Area Selector 省、市、地区联动选择JS封装类
在"纯js实现省市区三级联动"的项目中，开发者通过JavaScript代码，创建了三个下拉列表，分别代表省份、城市和区县。这些下拉列表的数据来源通常是JSON格式，因为JSON是一种轻量级的数据交换格式，易于人阅读和编写，...
标题中的"js省市联动"指的是在前端开发中，使用JavaScript实现省市区选择框的联动效果。这是一种常见的功能，用户在选择省份时，市、区的选择框会根据所选省份动态更新选项，提供与省份相关联的下级行政区域供用户...
总的来说，JavaScript实现省份城市联动主要涉及到DOM操作、事件监听以及数据处理等技术。通过这个示例，开发者可以学习到如何在前端动态地改变页面内容，以及如何根据用户交互来更新数据。这个功能在各种需要地域...
总结来说，"基于Ajax的省市联动实现"是通过结合JavaScript的Ajax技术和JSON数据格式，实现在JavaWeb应用中动态加载和更新市的下拉列表。这个过程涉及客户端的事件监听、Ajax请求、JSON数据解析，以及服务器端的JSON...
js实现省市县三级联动 2020年最新地区定义
例如，使用Node.js和Express框架，我们可以创建一个路由来处理省市联动的请求： ```javascript const express = require('express'); const app = express(); app.use(express.json()); app.get('/api/cities', ...