您的位置：首页 > 理论基础 > 计算机网络

省市联动下拉框基于:js + xmlhttp

2006-08-27 17:15 483 查看

#region 省市联动下拉框基于: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>
省市联动下拉框基于: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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

省市联动下拉框 基于:js + xmlhttp

省市联动下拉框基于:js + xmlhttp