资源描述
1.xmlFile/province.xml
<China>
<Province>北京市:110000</Province>
<Province>天津市:120000</Province>
<Province>河北省:130000 </Province>
<Province>山西省:140000</Province>
<Province>内蒙古自治区:150000</Province>
<Province>辽宁省:210000</Province>
</China>
2. xmlFile/city.xml
<China>
<Province id="110000">
<city>北京市:110100</city>
</Province>
<Province id="120000">
<city>天津市:120100</city>
</Province>
<Province id="130000">
<city>石家庄市:130100</city>
<city>唐山市:130200</city>
<city>秦皇岛市:130300</city>
<city>邯郸市:130400</city>
<city>邢台市:130500</city>
<city>保定市:130600</city>
<city>张家口市:130700</city>
<city>承德市:130800</city>
<city>沧州市:130900</city>
<city>廊坊市:131000</city>
<city>衡水市:131100</city>
</Province>
<Province id="140000">
<city>太原市:140100</city>
<city>大同市:140200</city>
<city>阳泉市:140300</city>
<city>长治市:140400</city>
<city>晋城市:140500</city>
<city>朔州市:140600</city>
<city>忻州地区:142200</city>
<city>吕梁地区:142300</city>
<city>晋中地区:142400</city>
<city>临汾地区:142600</city>
<city>运城地区:142700</city>
</Province>
<Province id="150000">
<city>呼和浩特市:150100</city>
<city>包头市:150200</city>
<city>乌海市:150300</city>
<city>赤峰市:150400</city>
<city>呼伦贝尔盟:152100</city>
<city>兴安盟:152200</city>
<city>哲里木盟:152300</city>
<city>锡林郭勒盟:152500</city>
<city>乌兰察布盟:152600</city>
<city>伊克昭盟:152700</city>
<city>巴彦淖尔盟:152800</city>
<city>阿拉善盟:152900</city>
<city>鄂尔多斯市:150500</city>
</Province>
<Province id="210000">
<city>沈阳市:210100</city>
<city>大连市:210200</city>
<city>鞍山市:210300</city>
<city>抚顺市:210400</city>
<city>本溪市:210500</city>
<city>丹东市:210600</city>
<city>锦州市:210700</city>
<city>营口市:210800</city>
<city>阜新市:210900</city>
<city>辽阳市:211000</city>
<city>盘锦市:211100</city>
<city>铁岭市:211200</city>
<city>朝阳市:211300</city>
<city>葫芦岛市:211400</city>
</Province>
</China>
3. index.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>省市下拉列表</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div>
<select id="prov" onChange="javascript:ProvCity.setProvince(this);">
<option value="">请选择...</option>
</select>
<select id="city" onChange="javasctipt:ProvCity.setCities(this);">
<option>请选择...</option>
</select>
</div>
</body>
</html>
4. index.js
$(document).ready(function(){
// 初始化 默认值
ProvCity.getProvinces();
});
//xmlFile 是xml文件的地址
var ProvCity = {
loadXmlFile: function (xmlFile)
{
var xmlDom = null;
if (window.ActiveXObject)//IE浏览器中读取xml文件
{
xmlDom = new ActiveXObject("Microsoft.XMLDOM");
xmlDom.async="false";
xmlDom.load(xmlFile);
}
else if(document.implementation && document.implementation.createDocument)
{
//Firefox，Chrome 浏览器中读取xml文件 ,Chrome 需要开服务器才能访问
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET", xmlFile, false);
xmlhttp.send(null);
xmlDom = xmlhttp.responseXML;
}
else
{
xmlDom = null;
}
return xmlDom;
},
//好了读取出来了xml 我们就要获取的他的数据了
getProvinces: function() // 初始化省 数据
{
//生成关键词链接
var xdoc =ProvCity.loadXmlFile("xmlFile/province.xml"); // xml文件路径
//var list=xdoc.selectNodes("//keys")//只能在Ie浏览器中获取
var list=xdoc.getElementsByTagName("Province");//读取所有节点值
var htmlContent = "";
for(var i = 0; i < list.length; i++){
var provinces = list[i].firstChild.nodeValue; // 得到该结点中的内容
var provincesNode = provinces.split(":"); // 以 ":" 做为分隔,分成多个字符串数组
htmlContent = htmlContent + "<option value="+provincesNode[1]+">"+provincesNode[0]+"</option>";
// 将所有结点全部存放到该变量中
}
$("#prov").html( htmlContent); // 将结点加到select下
ProvCity.getCities(list[0].firstChild.nodeValue.split(":")[1]); // 根据省得到市,默认时为第一个
},
setProvince: function (obj){ // 改变省时,将选中的省设为被选中状态
var pro = $(obj).val();
$("#prov option").removeAttr("selected"); // 先去除属性 selected
$("#prov option[value="+pro+"]").attr("selected" , "selected"); // 将选中的结点设置属性 selected
ProvCity.getCities(pro);
},
// 根据省得到市
getCities:function(pro){
var xdoc = ProvCity.loadXmlFile("xmlFile/city.xml");
var list = xdoc.getElementById(pro); // 得到 id 值为 pro 的结点
var cityList = list.getElementsByTagName("city"); // 获取 id 值为 pro 结点的子结点(名为city的结点)
var htmlContent = "";
for(var i=0 ; i < cityList.length ; i++){
var cities = cityList[i].firstChild.nodeValue;
var cityNode = cities.split(":");
htmlContent = htmlContent + "<option value="+cityNode[1]+">"+cityNode[0]+"</option>";
}
$("#city").html(htmlContent);
},
// 改变市时,将选中的市设为被选中状态
setCities : function (obj){
var city = $(obj).val();
$("#city option").removeAttr("selected");
$("#city option[value="+city+"]").attr("selected" , "selected");
}
}
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
