【自适应】Zeexo主题88套样
【城市分站系统源码】带
【自适应】响应式跨境外
【自适应】响应式通信电
如何让2个select 之间有关联？元素模板为您解答
下面HTML文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
下面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>
<option value="吉林省">吉林省</option>
<option value="辽宁省">辽宁省</option>
<option value="山东省">山东省</option>
</select>
<select id="city" name="city">
<option value="">请选择.....</option>
</select>
</body>
<script language="JavaScript">
$().ready(function(){
$("#province").change(function(){
//清空city
$("#city option:not(:first)").remove();
//根据province设置city
var prov = $(this).val();
$.post("cities.xml",function(data){
var $xmlProv = $(data).find("province[name="+prov+"]");
var $cities = $xmlProv.find("city");
$cities.each(function(i,city){
var $opt = $("<option></option>");
$opt.text($(city).text());
$opt.appendTo($("#city"));
});
},"xml");
});
})
</script>
</html>
下面是XML 文件
下面是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>