达维营-前端网jquery实现省市二级联动，直接上代码：
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test01.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<select id="province" name="province">
<option value="">请选择....</option>
</select>
<select id="city" name="city">
<option value="">请选择.....</option>
<option value="铁岭">铁岭</option>
</select>
</body>
<script language="JavaScript">
$.get("cities.xml", function (xml) {
var docXml = xml;
var $provinceXmlElements = $(docXml).find("province");
$provinceXmlElements.each(function (index, domEle) {
var $provinceXmlValue = $(domEle).attr("name");
var $option = $("<option></option>");
$option.attr("value", $provinceXmlValue);
$option.text($provinceXmlValue);
var $provinceElement = $("#province");
$provinceElement.append($option);
});
$("#province").change(function () {
var $provinceValue = $("#province").val();
//$("#city option[value!='']").each(function(index,domEle){
// $(domEle).remove();
//});
$("#city option[value!='']").remove();
$provinceXmlElements.each(function (index, domEle) {
var $provinceXmlValue = $(domEle).attr("name");
if ($provinceValue == $provinceXmlValue) {
var $cityXmlElements = $(domEle).find("city");
$cityXmlElements.each(function (index, domEle) {
var $cityXmlValue = $(domEle).text();
var $option = $("<option></option>");
$option.attr("value", $cityXmlValue);
$option.text($cityXmlValue);
var $cityElement = $("#city");
$cityElement.append($option);
});
}
});
});
})
</script>
</html>
cities.xml
<?xml version="1.0" encoding="GB2312"?> <china> <province name="吉林省"> <city>长春</city> <city>吉林市</city> <city>四平</city> <city>松原</city> <city>通化</city> </province> <province name="辽宁省"> <city>沈阳</city> <city>大连</city> <city>鞍山</city> <city>抚顺</city> <city>铁岭</city> </province> <province name="山东省"> <city>济南</city> <city>青岛</city> <city>威海</city> <city>烟台</city> <city>潍坊</city> </province> </china>