<html>
<head>
<script type="text/javascript">
//Ajax实现下拉框二级级联，根据第一个下拉框的值改变第二个下拉框内的列表
//根据浏览器的类型，创建xmlHttpRequest对象
function createXmlHttpRequest()
{
if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else if( window.XMLHttpRequest())
{
return new XMLHttpRequest();
}
}
var xmlHttpRequest;
//异步响应函数
function search(para)
{
var url="/search?para="+para; //后台请求的路径
xmlHttpRequest=createXmlHttpRequest();
xmlHttpRequest.onreadystatechange=callback; //将回调函数注册给状态改变事件
xmlHttpRequest.open("GET",url,true);
xmlHttpRequest.send(null);
}
//回调函数
function callback()
{
var dlCity=document.getElementById("city");
//请求被成功响应，已接收到结果
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200)
{
var result=xmlHttpRequest.responseText; //返回的结果字符串
//var result = "哈尔滨|大庆||鹤岗|佳木斯|牡丹江";
var cityArray= result.split("|"); //返回的结果字符串中，值之间是以|分隔的，所以先拆分成数组
var count = cityArray.length;
dlCity.length=0; //先将下拉列表框清空
for (var i = 0; i <count; i++)
{
dlCity.options.add(new Option(cityArray[i], cityArray[i])); //将结果循环添加到下拉列表中
}
}
else
{
dlCity.length=0;
dlCity.options.add(new Option("请等待...","-1"));
}
}
//下拉框改变事件
function changeCityOptions()
{
var dlProvince=document.getElementById("province");
var dlCity=document.getElementById("city");
dlCity.length=0;
if(dlProvince.value==-1)
{
dlCity.options.add(new Option("城市列表","-1"));
}
else
{
search(dlProvince.value);
}
return;
}
</script>
</head>
<body>
<select name="province" id="province" onchange="changeCityOptions()">
<option value="-1">选择省份</option>
<option value="1">黑龙江</option>
<option value="2">吉林</option>
</select>
<select name="city" id="city">
<option value="-1">城市列表</option>
</select>
</body>
</html>
分享到：
相关推荐
在这个“js和ajax实现三级联动.zip”压缩包中，包含了一个实现三级联动（省市区选择）的示例。这种功能常用于地址输入或者地理定位等场景，为用户提供了流畅的导航体验。 首先，我们来理解一下什么是三级联动。在...
本篇将深入探讨如何利用JSP和AJAX实现两级select联动的效果，以及这种效果在实际应用中的价值。 首先，我们要理解什么是JSP。JSP是Java的一种服务器端脚本语言，它允许开发者在HTML页面中嵌入Java代码，从而动态...
总结来说，这个例子展示了如何使用AJAX和JSP技术实现二级联动效果。通过监听一级选项的变化，发送异步请求获取新的二级数据，然后动态更新二级下拉框，实现了不刷新页面就能实时更新内容的交互体验。这在实际的网页...
在本案例中，“Ajax实现省市二级联动”是指利用Ajax技术，动态地获取并展示省市两级菜单的数据，使得用户在选择省份时，城市列表能够即时更新，而无需页面整体刷新，提升了用户体验。 首先，我们需要理解Ajax的工作...
asp+access数据库+ajax实现两级联动菜单[借鉴].pdf
在Struts2框架中，我们可以利用Ajax来实现二级联动效果，即在一个下拉框的选择改变时，通过Ajax请求动态地更新另一个下拉框的内容。 首先，我们需要了解Struts2的Action类，它是处理用户请求的核心。在实现二级联动...
**Ajax DWR 框架实现二级联动下拉列表源码详解** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。DWR（Direct Web Remoting）则是一个用于Java web应用的开源...
在网页开发中，"Ajax省市二级联动"是一个常见的功能，用于实现用户在选择省份时，城市下拉框自动更新对应省内的城市数据。这个功能提高了用户体验，减少了不必要的页面刷新，使得用户能够在不离开当前页面的情况下...
在“两级联动下拉列表”中，通常有两个或更多下拉菜单，它们之间有依赖关系。例如，第一个下拉框选择了国家，第二个下拉框则根据所选国家动态加载对应的省份。当用户在第一个下拉框中做出选择时，AJAX会异步发送请求...
在这个项目中，我们看到一个基于SSM实现的省市二级联动功能，利用了Ajax、Jquery和JSON技术。这个功能通常用于在前端展示时，用户选择省份后，自动加载并显示对应的市列表，提供了便捷的交互体验。 首先，我们需要...
实现二级联动选择通常涉及到两个主要步骤：监听事件和发送AJAX请求。例如，当用户在一级选择框中选择一个值时，会触发一个事件，这个事件会启动一个AJAX请求到服务器，获取与该选择相关的二级选项。然后，服务器返回...
在本文中，我们将深入探讨如何使用AJAX和jQuery来实现二级联动效果，特别是在网页表单中，例如选择籍贯的省份和城市。二级联动是指在一个下拉列表的选择触发后，另一个下拉列表自动填充相关数据。在这个例子中，当...
总的来说，利用Ajax实现二级联动菜单是一种常见的前端技术实践，它能够提高用户体验，使网页操作更加流畅。通过深入学习和实践，你将能够灵活运用Ajax解决更多类似的问题，提升你的Web开发技能。
在Web开发中，二级或三级联动下拉框是一种常见的交互设计，主要用于展示层次关系的数据，如省份-城市-区县的区域选择。本教程将详细讲解如何使用Ajax和Servlet技术来实现这一功能。 首先，我们需要了解Ajax...
下面将详细讲解如何使用Ajax和PHP实现一个简单的二级联动效果。 首先，我们需要创建数据表来存储这些联动数据。根据描述中的"关于数据表.txt"，我们可以假设有两个数据表：`provinces` 和 `cities`。`provinces` 表...
【Ajax四级联动菜单】是一种基于Ajax技术实现的动态下拉菜单功能，通常用于网页上的地区选择，例如国家、省份、城市、区县等。在这个示例中，它使用了Oracle数据库存储四级菜单的数据，并结合JSP（JavaServer Pages...
在Java中实现两级联动，主要涉及到后端的数据处理和前端的界面交互。这里我们可以分为以下几个关键步骤来理解： 1. **后端数据准备**：首先，你需要有一套完整的数据结构来存储两级联动的数据。例如，可以使用Map, ...
在网页开发中，二级联动效果通常用于实现如省市区选择、类别分类等场景，它能够为用户提供更加直观和便捷的交互体验。本示例主要关注如何利用AjaxPro.dll组件来实现这种效果。AjaxPro是一个ASP.NET下的AJAX库，它...
总结来说，"用AJAX实现的jsp三级联动"主要涉及以下知识点： 1. AJAX技术：包括XMLHttpRequest对象的使用，以及异步请求的发送和接收。 2. JSP和Servlet：用于处理服务器端逻辑，如根据前端请求获取数据，生成JSON...
这里的“基于Ajax的二级联动下拉列表”是一个技术实现方案，它结合了Ajax（异步JavaScript和XML）技术和HTML、CSS、JavaScript来创建动态、无需刷新页面的交互体验。下面将详细介绍这一技术及其相关知识点。 首先，...