1、利用servlet作为服务器,以xml形式输出省市的、数据,代码如下:
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
response.setContentType("text/xml,charset=utf-8");//表示以xml形式输出数据
PrintWriter out = response.getWriter();
out.println("<china>");
out.println("<province name='广东省'>");
out.println("<city>广州市</city>");
out.println("<city>佛山市</city>");
out.println("<city>深圳市</city>");
out.println("<city>湛江市</city>");
out.println("</province>");
out.println("<province name='江苏省'>");
out.println("<city>徐州市</city>");
out.println("<city>无锡市</city>");
out.println("<city>常州市</city>");
out.println("</province>");
out.println("<province name='广西省'>");
out.println("<city>桂林市</city>");
out.println("<city>北海市</city>");
out.println("<city>南宁市</city>");
out.println("</province>");
out.println("</china>");
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
2、test.js文件,在这个文件会模拟ajax连接servlet服务器,并获取服务器输出的xml数据,并绑定前台下拉框和实现联动 代码如下:
//创建XmlHttpRequest对象
function getXmlHttpRequest(){
var xmlHttpRequest;
try {
xmlHttpRequest = new XMLHttpRequest();
} catch (e) {
try {
// Internet Explorer
xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTp");
}catch(e){
try{
// Internet Explorer
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
}
}
}
return xmlHttpRequest;
}
window.onload = function(){
var data;
var xmlHttpRequest = getXmlHttpRequest();
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.readyState==4){
if(xmlHttpRequest.status==200){
data = xmlHttpRequest.responseXML;
//获取所有标签province元素
var provinceElements = data.getElementsByTagName("province");
for(var i = 0 ;i < provinceElements.length ; i++){
//得到每个province元素
var provinceElement = provinceElements[i];
//获取元素中name的属性值
var value = provinceElement.getAttribute("name");
//创建option元素
var optionElement = document.createElement("option");
//给option设置value属性值
optionElement.setAttribute("value",value);
//创建文本节点
var textElement = document.createTextNode(value);
//给option元素追加文本
optionElement.appendChild(textElement);
//获取id为province的元素
var province = document.getElementById("province");
//给province元素追加option
province.appendChild(optionElement);
}
}
}
}
//xmlHttpRequest.open("GET","./servlet/HtmlServlet?a=8",true);
xmlHttpRequest.open("POST","./servlet/XmlServlet",true);
xmlHttpRequest.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");//使用get可以不设置,使用post必须设置,告知服务器正在发送数据,并通过url编码
xmlHttpRequest.send(null);
//xmlHttpRequest.send("b=9&c=10");
document.getElementById("province").onchange = function(){
//获取id为province的元素
var city = document.getElementById("city");
var optionConut = city.options.length;//获取城市中页面显示的选择数目
for(var j = 0; optionConut>1&&j < optionConut-1; j++){
city.options.remove(1);//删除除了请选择这个选项的之前所有选项
} //city.sel.selectindex=1;
var selectValue = this.options[this.selectedIndex].value;
//alert(selectValue);
var provinceElements = data.getElementsByTagName("province");
for (var i = 0; i < provinceElements.length; i++) {
//得到每个province元素
var provinceElement = provinceElements[i];
//获取元素中name的属性值
if (provinceElement.getAttribute("name") == selectValue) {
var cityElements = provinceElement.getElementsByTagName("city");
for (var j = 0; j < cityElements.length; j++){
//cityElements[i].childNodes[0].nodeValue
var cityElement = cityElements[j].childNodes[0];
//获取city元素文本值
var text = cityElement.nodeValue;
//创建option元素
var optionElement = document.createElement("option");
//给option设置value属性值
optionElement.setAttribute("value", text);
//创建文本节点
var textElement = document.createTextNode(text);
//给option元素追加文本
optionElement.appendChild(textElement);
//给province元素追加option
city.appendChild(optionElement);
}
}
}
}
}
3、前台jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript" src="${pageContext.request.contextPath }/scripts/test.js"></script>
</head>
<body>
<form action="" enctype="application/x-www-form-urlencoded" >
<div>
省份:<select id="province">
<option value="请选择">请选择</option>
</select>
市区:<select id="city">
<option value="请选择">请选择</option>
</select>
</div>
</form>
</body>
</html>
分享到:
相关推荐
js2级省市联动下拉框js2级省市联动下拉框js2级省市联动下拉框js2级省市联动下拉框
xml城市下拉框联动,xml城市下拉框联动,xml城市下拉框联动
dataGridView读取文件列名和数据库字段名称,文件列名作为原始列(固定的),数据库字段列(动态下拉框)。一个设定关系导入功能
jQuery解析xml文件,实现省市县三级联动下拉框
AJAX版省市区三级联动下拉框 使用说明: 1、在sql server 2000 中建立一个库:asptest 2、在sql server 2000 中建立一个帐号:asptest,密码:asptest 3、把压缩包中的 asptest 恢复到库 asptest 中,...
最近小弟做了Extjs实现实现下拉框联动的效果,参考了好久才学会,闲下来发一个简单的例子。。呵呵
Ajax实现下拉框三级联动,实现数据库动态连接,无刷新动态更新 MyEclipse+Ajax+SQL Server 2005
从后台获取数据,填充,实现搜索下拉框
全国省市区地址下拉框二级、三级联动选择html例子,JS本地实现,无需网络就能使用,数据为国家省市区6位标准编码,二级联动为省、市的下拉框选择,三级联动为省、市、区的下拉框选择,效果请打开压缩包中的html页面...
Ajax 无限级 联动下拉框
省市下拉框二级联动完成版(调试通过),本人花了几小时整理的,觉得是完整版。并且立即可以使用!
Ajax实现的三级联动下拉框
主要介绍了C#实现下拉框绑定list集合的方法,涉及C#中控件绑定的相关技巧,需要的朋友可以参考下
Ajax实现二级/三级联动下拉框---servlet版
用XML存储地区数据,页面上使用: var Array_AreaName = ["","",""]; /// 地区值设置初始值 并在body 的onload 事件里添加:Set_AreaSelected(); ;"> 所在省份 所在地市 市、县级市、县 可以在js里自定义...
ajax 实现 (全国,省,是,区....) N级联 Demo js: <script type="text/javascript"> $(function () { $.fn.CascadeSelect({ url: '/CascadeSelect/CascadeSelect.ashx', //返回Json数据的一般处理文件 idKey: ...
winform 页面 下拉框 省市联动选择 demo 小功能组件 选择省后,市选项就自动变为该省内的选项
layui下拉框select动态获取后台数据,下拉框二级联动效果,压缩包里打开a.html即可查看。