求个jquery三级城市联动的例子

Question

本帖最后由 chen276675678 于 2012-02-17 13:28:05 编辑

Answer 1

http://download.csdn.net/detail/a89359511/3970001
http://topic.csdn.net/u/20100428/23/e09564af-3aaf-43bf-9e14-f9dbda58b439.html
这两个对你应该有帮助

Answer 2

<script type="text/javascript">
   window.onload = function() {
var xmlDoc = getXmlDoc();
var root = xmlDoc.documentElement; //获取xml文件中的根节点
var x_province = root.childNodes; //获取所有的省份节点 var s_province = document.getElementById("province");
var s_city = document.getElementById("city");
var s_area = document.getElementById("area");
//遍历xml文件中的省份节点
for ( var i = 0; i < x_province.length; i++) {
//判断当前节点是否是元素节点，以实现不同浏览器之间的兼容性
if (x_province[i].nodeType == 1) {
//创建页面中省份的option对象
var sp_option = document.createElement("option");
sp_option.appendChild(document.createTextNode(x_province[i]
.getAttribute("name")));
//为省份的option对象添加属性
sp_option.setAttribute("value", x_province[i]
.getAttribute("name"));
s_province.appendChild(sp_option);
}
}
//选择省份下拉菜单时触发事件并处理
s_province.onchange = function() {
//获取页面中省份节点下的所有option集合
var sp_opts = s_province.options;
//获取选中option对象的下标值
var index = sp_opts.selectedIndex;
//清空市、县(区)
s_city.length = 0;
s_area.length = 0;
//获取页面中选中省份的value值
var sp_postcode = sp_opts[index].getAttribute("value");
for ( var j = 0; j < x_province.length; j++) {
if (x_province[j].nodeType == 1) {
var xp_postcode = x_province[j].getAttribute("name");
if (xp_postcode == sp_postcode) {
var x_city = x_province[j].childNodes;
s_city.length = 0;
for ( var k = 0; k < x_city.length; k++) {
if (x_city[k].nodeType == 1) {
var sc_option = document.createElement("option");
sc_option.appendChild(document
.createTextNode(x_city[k]
.getAttribute("name")));
sc_option.setAttribute("value", x_city[k]
.getAttribute("name"));
s_city.appendChild(sc_option);
}
}
break;
}
}
}
}
s_city.onchange = function() {
var sc_opts = s_city.options;
var index = sc_opts.selectedIndex;
var sc_postcode = sc_opts[index].getAttribute("value");
for ( var x = 0; x < x_province.length; x++) {
if (x_province[x].nodeType == 1) {
var x_city = x_province[x].childNodes;
for ( var y = 0; y < x_city.length; y++) {
if (x_city[y].nodeType == 1) {
var xc_postcode = x_city[y].getAttribute("name");
if (xc_postcode == sc_postcode) {
s_area.length = 0;
var x_area = x_city[y].childNodes;
for ( var z = 0; z < x_area.length; z++) {
if (x_area[z].nodeType == 1) {
var sa_option = document
.createElement("option");
sa_option.appendChild(document
.createTextNode(x_area[z]
.getAttribute("name")));
sa_option.setAttribute("value", x_area[z]
.getAttribute("name"));
s_area.appendChild(sa_option);
}
}
break;
}
}
}
}
}
}
}
//创建xmlDoc对象
function getXmlDoc() {
var xmlDoc;
try {
//创建一个空的微软xmlDoc对象
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
} catch (err1) {
try {
//创建一个空的其他浏览器厂商的xmlDoc对象(FF,Opera)
xmlDoc = document.implementation.createDocument("", "", null);
} catch (err2) {
alert("您的浏览器不支持XMLDOM....");
}
}
xmlDoc.async = false; //关闭异步加载
xmlDoc.load("Loclist.xml"); //加载xml文件
return xmlDoc;
}
</script> <form id="form1" runat="server">
    <select id="province" runat=server style="width: 100px;"></select>
    <select id="city"     runat=server style="width: 100px;"></select>
<select id="area"     runat=server style="width: 100px;"></select>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </form>

Answer 3

<?xml version="1.0" encoding="UTF-8"?>
<root name="中国">
  <province name="请选择省" postpostcode="100000">
    <city name="请选择市" postpostcode="100100">
      <area name="请选择区" postpostcode="100101" />
    </city>
  </province>
  <province name="北京" postcode="11">
    <city name="东城" postcode="1">
      <arae name="12312" postcode="12321"></arae>
    </city>
    <city name="西城" postcode="2" />
    <city name="朝阳" postcode="5" />
    <city name="丰台" postcode="6" />
    <city name="石景山" postcode="7" />
    <city name="海淀" postcode="8" />
    <city name="门头沟" postcode="9" />
    <city name="房山" postcode="11" />
    <city name="通州" postcode="12" />
    <city name="顺义" postcode="13" />
    <city name="昌平" postcode="21" />
    <city name="大兴" postcode="24" />
    <city name="平谷" postcode="26" />
    <city name="怀柔" postcode="27" />
    <city name="密云" postcode="28" />
    <city name="延庆" postcode="29" />
  </province>

Answer 4

我是这样做的，现在有这么个情况。运行页面，不做任何操作1.select1 显示正常，select2和select3显示空白
2. 鼠标选择select1的时候，select2显示正常；但当select2默认是第一个值时，select3还是空白的，如果select2选第二个值，select3就正常了‘；’不知道我说的是否清楚

Answer 5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><BODY><SCRIPT LANGUAGE="JavaScript" src="chinacity.js"></script>
<select  id="id_province" style="font-size:9pt;"></select>
<select name='city' id="id_city" style="font-size:9pt;"></select><SCRIPT LANGUAGE="JavaScript">
<!--var __o = new ChinaCity();
__o.initProvince("河南","id_province","id_city");//-->
</SCRIPT>
</BODY>
</HTML>
function ChinaCity(){
  this.cityArray = [
 ["","省份"]
,["北京","东城|西城|崇文|宣武|朝阳|丰台|石景山|海淀|门头沟|房山|通州|顺义|昌平|大兴|平谷|怀柔|密云|延庆",""]
,["上海","黄浦|卢湾|徐汇|长宁|静安|普陀|闸北|虹口|杨浦|闵行|宝山|嘉定|浦东|金山|松江|青浦|南汇|奉贤|崇明",""]
,["天津","和平|东丽|河东|西青|河西|津南|南开|北辰|河北|武清|红挢|塘沽|汉沽|大港|宁河|静海|宝坻|蓟县",""]
,["重庆","万州|涪陵|渝中|大渡口|江北|沙坪坝|九龙坡|南岸|北碚|万盛|双挢|渝北|巴南|黔江|长寿|綦江|潼南|铜梁 |大足|荣昌|壁山|梁平|城口|丰都|垫江|武隆|忠县|开县|云阳|奉节|巫山|巫溪|石柱|秀山|酉阳|彭水|江津|合川|永川|南川",""]
,["河北","石家庄|邯郸|邢台|保定|张家口|承德|廊坊|唐山|秦皇岛|沧州|衡水","石家庄"]
,["山西","太原|大同|阳泉|长治|晋城|朔州|吕梁|忻州|晋中|临汾|运城","太原"]
,["内蒙古","呼和浩特|包头|乌海|赤峰|呼伦贝尔盟|阿拉善盟|哲里木盟|兴安盟|乌兰察布盟|锡林郭勒盟|巴彦淖尔盟|伊克昭盟","呼和浩特"]
,["辽宁","沈阳|大连|鞍山|抚顺|本溪|丹东|锦州|营口|阜新|辽阳|盘锦|铁岭|朝阳|葫芦岛","沈阳"]
,["吉林","长春|吉林|四平|辽源|通化|白山|松原|白城|延边","长春"]
,["黑龙江","哈尔滨|齐齐哈尔|牡丹江|佳木斯|大庆|绥化|鹤岗|鸡西|黑河|双鸭山|伊春|七台河|大兴安岭","哈尔滨"]
,["江苏","扬州|高邮|江都|仪征|宝应|南京|镇江|苏州|南通|扬州|盐城|徐州|连云港|常州|无锡|宿迁|泰州|淮安","南京"]
,["浙江","杭州|宁波|温州|嘉兴|湖州|绍兴|金华|衢州|舟山|台州|丽水","杭州"]
,["安徽","合肥|芜湖|蚌埠|马鞍山|淮北|铜陵|安庆|黄山|滁州|宿州|池州|淮南|巢湖|阜阳|六安|宣城|亳州","合肥"]
,["福建","福州|厦门|莆田|三明|泉州|漳州|南平|龙岩|宁德","福州"]
,["江西","南昌|景德镇|九江|鹰潭|萍乡|新馀|赣州|吉安|宜春|抚州|上饶","南昌"]
,["山东","济南|青岛|淄博|枣庄|东营|烟台|潍坊|济宁|泰安|威海|日照|莱芜|临沂|德州|聊城|滨州|菏泽","济南"]
,["河南","郑州|开封|洛阳|平顶山|安阳|鹤壁|新乡|焦作|濮阳|许昌|漯河|三门峡|南阳|商丘|信阳|周口|驻马店|济源","郑州"]
,["湖北","武汉|宜昌|荆州|襄樊|黄石|荆门|黄冈|十堰|恩施|潜江|天门|仙桃|随州|咸宁|孝感|鄂州","武汉"]
,["湖南","长沙|常德|株洲|湘潭|衡阳|岳阳|邵阳|益阳|娄底|怀化|郴州|永州|湘西|张家界","长沙"]
,["广东","广州|深圳|珠海|汕头|东莞|中山|佛山|韶关|江门|湛江|茂名|肇庆|惠州|梅州|汕尾|河源|阳江|清远|潮州|揭阳|云浮","广州"]
,["广西","南宁|柳州|桂林|梧州|北海|防城港|钦州|贵港|玉林|南宁地区|柳州地区|贺州|百色|河池","南宁"]
,["海南","海口|三亚","海口"]
,["四川","成都|绵阳|德阳|自贡|攀枝花|广元|内江|乐山|南充|宜宾|广安|达川|雅安|眉山|甘孜|凉山|泸州","成都"]
,["贵州","贵阳|六盘水|遵义|安顺|铜仁|黔西南|毕节|黔东南|黔南","贵阳"]
,["云南","昆明|大理|曲靖|玉溪|昭通|楚雄|红河|文山|思茅|西双版纳|保山|德宏|丽江|怒江|迪庆|临沧","昆明"]
,["西藏","拉萨|日喀则|山南|林芝|昌都|阿里|那曲","拉萨"]
,["陕西","西安|宝鸡|咸阳|铜川|渭南|延安|榆林|汉中|安康|商洛","西安"]
,["甘肃","兰州|嘉峪关|金昌|白银|天水|酒泉|张掖|武威|定西|陇南|平凉|庆阳|临夏|甘南","兰州"]
,["宁夏","银川|石嘴山|吴忠|固原","银川"]
,["青海","西宁|海东|海南|海北|黄南|玉树|果洛|海西","西宁"]
,["新疆","乌鲁木齐|石河子|克拉玛依|伊犁|巴音郭勒|昌吉|克孜勒苏柯尔克孜|博尔塔拉|吐鲁番|哈密|喀什|和田|阿克苏","乌鲁木齐"]
,["香港","香港特别行政区",""]
,["澳门","澳门特别行政区",""]
,["台湾","台北|高雄|台中|台南|屏东|南投|云林|新竹|彰化|苗栗|嘉义|花莲|桃园|宜兰|基隆|台东|金门|马祖|澎湖","台北"]
,["海外","海外"]
],
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 
// 功能：初始化函数；
// 参数：
//      defaultValue:初始时的默认选项的值；
//      inputProvince:一级select标签的ID(如:省级)。
//      inputCity:二级select标签的ID(如:省下面的市级);
// 说明:数据结构在每行添加了一列:一省省会名称（或一地区市的市中心，如果没有，请置空；但不可无。）
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
this.initProvince = function (defaultValue,inputProvince,inputCity){
var _this = this;
var o = document.getElementById(inputProvince);
var i=0,j=0,k;var cityname="";o.length = 0;

for (i = 0 ;i <_this.cityArray.length;i++){
cityname = _this.cityArray[i][0];
if(cityname=="") cityname = _this.cityArray[i][1];
o.options[o.length] = new Option(cityname,_this.cityArray[i][0]);//Text,Value
}
o.value = defaultValue;
//o.onclick=function(){_this.setCity2(this.options[this.selectedIndex].value,inputCity);}
o.onchange=function(){_this.setCity2(this.options[this.selectedIndex].value,inputCity);}
_this.setCity2(defaultValue,inputCity);
}
this.setCity2 = function (defaultValue,inputCity){
var _this = this;
var o = document.getElementById(inputCity);
var currProvince = currProvince;
var i,j,k;o.length = 0 ;
var _CityNo1 = "";
for (i = 0 ;i <_this.cityArray.length;i++){  
if(_this.cityArray[i][0]==defaultValue){
if(defaultValue==""){
o.options[o.length] = new Option("不限","");
}
else{
tmpcityArray = _this.cityArray[i][1].split("|")
for(j=0;j<tmpcityArray.length;j++){
if(tmpcityArray[j]==_this.cityArray[i][2]) _CityNo1="*";
else _CityNo1="";
o.options[o.length] = new Option(tmpcityArray[j]+_CityNo1,tmpcityArray[j]);
}
}
}
}

}
}

Answer 6

[email protected]  发个吧，谢谢

Answer 7

呵呵，我要三级联动的，我用的腾讯的XML数据

Answer 8

这个网上不是有吗？
http://www.cnblogs.com/Artur/archive/2010/06/21/1756004.html

Answer 9

知道啊，我说了我是要用xml数据