在网上找了一些关于省市县的三级联动菜单，有些不能用，有些也只能在IE里用，自己用JQuery来写了一下，现在可以同时支持IE和FireFox(不过只能放在项目中并启动项目才能用)，所以写出来让大家参考一下，在附件中提供了省市县的XML文件，以下代码的源文件，以及JQuery的核心js文件，还有省市县的Excel文件，如果想知道怎么把Excel中的数据迁移到XML中去的话，
请参考文章：
http://zsl131.iteye.com/admin/blogs/575409
<%@page pageEncoding="UTF-8" language="java" %>
<html>
<head>
<title>js + xml 省市县三级联动</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript">
$j(function(){
var contextPath = $j("#contextPath").val();
var path = contextPath+"/xml/Area.xml";
$j.ajax({url:path,
success:function(xml){
$j(xml).find("province").each(function(){
var t = $j(this).attr("name");//this->
$j("#DropProvince").append("<option value='"+ $j(this).attr("name")+"'>"+t+"</option>");
});
}
});
$j("#DropProvince").change(function(){
$j("#DropCity>option").remove();
$j("#DropCountry>option").remove();
$j("#DropCountry").append("<option value=''>选择区</option>");
var pname = $j("#DropProvince").val();
$j.ajax({url:path,
success:function(xml){
$j("#DropCity").append("<option value=''>选择市</option>");
$j(xml).find("province[name='"+pname+"']>city").each(function(){
$j("#DropCity").append("<option value='"+$j(this).attr("name")+"'>"+$j(this).attr("name")+"</option>");
});
}
});
});
$j("#DropCity").change(function(){
$j("#DropCountry>option").remove();
var pname = $j("#DropCity").val();
$j.ajax({url:path,
success:function(xml){
$j("#DropCountry").append("<option value=''>选择区</option>");
$j(xml).find("city[name='"+pname+"']>country").each(function(){
$j("#DropCountry").append("<option value='"+$j(this).attr("value")+"'>"+$j(this).attr("name")+"</option>");
});
}
});
});
});
</script>
<style type="text/css">
select {
-o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
color:red;
}
</style>
</head>
<body>
<input type="hidden" value="<%=request.getContextPath() %>" id="contextPath"/>
<select id="DropProvince" name="province">
<option value="" selected="selected">省/直辖市</option>
</select>
<select id="DropCity" name="city">
<option value="" selected="selected">请选择</option>
</select>
<select id="DropCountry" name="country">
<option value="" selected="selected">请选择</option>
</select>
</body>
</html>
分享到：
相关推荐
综上所述，"JS+XML 省市区三级联动 支持ie,firefox,Opera"这个项目旨在提供一个跨浏览器的解决方案，利用JavaScript和XML技术实现在网页上创建一个交互式的省市区选择器。这个方案不仅可以提高用户体验，还能适应...
"Xml+JS省市县三级联动(兼容IE FF)"就是一个这样的解决方案，它利用JavaScript（JS）语言处理XML文件，实现了在不同浏览器（如Internet Explorer和Firefox）中都可正常运行的联动效果。 XML（Extensible Markup ...
本项目名为"省市县三级联动(支持ie ff)"，意味着它不仅适用于现代浏览器，如Firefox（FF），还兼容较为老旧的Internet Explorer（IE）浏览器。 首先，我们来了解一下三级联动的基本概念。在网页上，三级联动指的是...
4. **兼容性**：描述中提到该功能在IE、Firefox、Opera、Safari、Chrome等浏览器上验证通过，表明开发者已经考虑了跨浏览器的兼容性问题。这可能涉及到对不同浏览器API的适配，以及可能使用了一些polyfill来提供老...
内容索引:脚本资源,jQuery,下拉菜单,三级联动 用Jquery实现的三级联动下拉列表插件，压缩包内有多个不同的版本，其实现的基本原理大同小异，无非是调用方式的不同，第一个是通过读取XML构建，支持IE/firefox，...
6. **兼容性处理**：由于提到这个解决方案已在IE和Firefox上测试通过，这意味着它考虑了浏览器之间的差异，可能采用了jQuery的跨浏览器兼容性特性。 此示例代码可能包含一个HTML文件，用于展示界面；一个JavaScript...
1.对于代码35.1.htm，使用Mozilla Firefox浏览器可直接运行，如果使用IE浏览器，需要在服务器端运行。 2.对于代码35.2.html，需要IIS+PHP+MySQL或Apache+PHP+MySQL环境支持 35.1.htm 读取XML文档 35.2....
1.对于代码35.1.htm，使用Mozilla Firefox浏览器可直接运行，如果使用IE浏览器，需要在服务器端运行。 2.对于代码35.2.html，需要IIS+PHP+MySQL或Apache+PHP+MySQL环境支持 35.1.htm 读取XML文档 35.2....
6. **兼容性处理**：为了确保在不同浏览器（如Chrome、IE、Firefox等）上都能正常工作，开发者需要考虑浏览器之间的差异，可能需要使用一些库（如jQuery）或者polyfills来处理兼容性问题。 7. **前端框架**：在给定...
在兼容性方面，由于这个功能宣称在IE9、Firefox、360和Chrome等主流浏览器上测试通过，说明其使用了广泛支持的JavaScript API和语法。对于老版本的IE（如IE9），可能需要借助jQuery或其他库来处理浏览器兼容性问题，...
代码说明：本章代码只能在Mozilla Firefox中运行。 7.1.htm 事件流 7.2.htm DOM2鼠标事件 7.3.htm 取消默认动作 7.4.htm 创建DOM2事件 第8章（\cha08） 8.1.htm 页面...
考虑到不同用户可能使用的浏览器版本各异，前端代码需要兼容各种主流浏览器，包括IE8+、Chrome、Firefox、Safari等。 总结，"Ajax n级联动数据库版（带后台和省市县数据库）"项目旨在提供一套完整的解决方案，帮助...
这样可以在IE5.0至IE6.0版本中使用ActiveXObject，而在IE7.0及更高版本、Firefox、Chrome、Opera、Safari等浏览器中使用XMLHttpRequest。 一旦建立了XMLHttpRequest对象，就要使用open()方法来指定请求类型（GET、...
硕正报表支持多种主流浏览器，包括Chrome、IE（包括64位）、Firefox，同时也兼容国产浏览器如360极速浏览器、360安全浏览器、猎豹、百度、搜狗等。此外，该套件可在Windows、Linux、Unix等操作系统上运行。 2. **...
支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注：ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: ...
支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注：ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: ...
这些组件都基于JavaScript和CSS，兼容各种浏览器，包括IE、Firefox、Chrome等，适用于各种现代Web开发项目。通过灵活的API和丰富的定制选项，dhtmlx UI组件可以满足各种复杂的应用场景，提高开发效率，为用户提供...
8. **兼容性**：EasyUI 1.5.1 在当时已经较好地支持了主流浏览器，包括 IE6+、Firefox、Chrome、Safari 和 Opera。 通过阅读 "EasyUI 1.5.1中文版帮助手册"，开发者不仅可以学习如何使用各个组件的基本用法，还可以...
- **兼容性**：与POSTBACK和CALLBACK并存，同时支持IE和Firefox。 - **事件模型**：提供了类似POSTBACK的CALLBACK事件处理。 **总结** Ajax技术的运用极大地改善了Web应用的交互性和性能。通过AjaxPro.dll这样的库...