|
#region 省市聯(lián)動(dòng)下拉框 基于:js + xmlhttp
script language="javascript">
function showprovince(listobj){
var xmldoc = new ActiveXObject("MSXML.DOMDocument");
xmldoc.async = false
xmldoc.load(‘Area.xml‘);
var provinces = xmldoc.selectSingleNode("Area");
if(provinces){
for(var i=0;i<provinces.childNodes.length;i++){
var province = provinces.childNodes[i];
var opt = new Option(province.getAttribute("name"),province.getAttribute("name"));
listobj.options[listobj.options.length]= opt ;
opt = null;
}
}
}
function showCity(province,listobj)
{
if(province != ""){
if(0 == listobj.options.length ){
var opt = new Option("-選擇-",‘‘) ;
listobj.options[listobj.options.length] = opt ;
opt = null ;
}
}
var xmldoc = new ActiveXObject("MSXML.DOMDocument");
xmldoc.async = false
xmldoc.load(‘Area.xml‘);
var cities = xmldoc.selectSingleNode("Area/Province[@name=‘"+province+"‘]");
if(cities){
for(var i=0;i<cities.childNodes.length;i++){
var city = cities.childNodes[i];
var opt = new Option(city.getAttribute("name"),city.getAttribute("name"));
listobj.options[listobj.options.length] = opt ;
opt = null;
}
}
if(listobj.options.length == 2){
listobj.options[1].selected = true ;
}
}
function clearOption(obj)
{
while(obj.options.length>0){
obj.options[obj.options.length-1] = null ;
}
}
function selectedProv(obj,province)
{
for(var i=0;i<obj.options.length;i++){
if(obj.options[i].value == province){
obj.options[i].selected = true ;
break ;
}
}
}
function selectedCity(listobj,province,city)
{
showCity(province,listobj) ;
obj = listobj ;
for(var i=0;i<obj.options.length;i++)
{
if(obj.options[i].value == city)
{
obj.options[i].selected = true ;
break ;
}
}
}
function init(){
showprovince(document.form1.PID);
selectedProv(document.form1.PID,‘‘);
selectedCity(document.form1.AreaCD,‘‘,‘‘);
}
window.onload=init;
</script>
</HEAD>
<BODY>
省市聯(lián)動(dòng)下拉框 基于:js + xmlhttp <br>
<hr>
<form name="form1">
省份:
<SELECT NAME="PID" onchange="javascript:clearOption(this.form.AreaCD);showCity(PID.options[this.options.selectedIndex].value,this.form.AreaCD);">
<option value=0 size=10>-選擇-</option>
</SELECT>
城市:
<SELECT NAME="AreaCD" >
<option value=0 size=10>-選擇-</option>
</SELECT>
</form>
</BODY>
#endregion
|
