无刷新三级联动菜单从数据库获取数据(适用于firefox和ie)

本文介绍了一种使用JavaScript实现省市县三级联动下拉选择框的方法。通过监听选择变化并动态加载数据来更新下级选项,实现了用户友好的地区选择功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

表单叶面
<script language="javascript" src="include/selectoption.js"></script>

<select name="privceid" id="privceid" onchange="editnextselect(this,'cityid');">
                            
<option value="-1">请选择</option>
                        
</select>
                        
<select name="cityid" id="cityid" onchange="editnextselect(this,'county');">
                            
<option value="-1">请选择</option>
                        
</select>市  
                        
<select name="county" id="county">
                            
<option value="-1">请选择</option>
                        
</select>区/县

<script language="javascript">
var privceid = "<%=privceid%>";
var cityid = "<%=cityid%>";
var county = "<%=county%>";
getdatelist(
'&pid=',privceid,'privceid');
if(cityid != ""){getdatelist('&pid='+ privceid ,cityid,'cityid');}
if(county != ""){getdatelist('&pid=' + cityid ,county,'county');}
function editnextselect(obj,nexselid){
if(nexselid == 'cityid'){
    selvalue 
= cityid;
}
else{
    selvalue 
= county;
}

    
var pid = obj.options[obj.selectedIndex].value;
    
if(pid != null){
        getdatelist(
'&pid='+ pid ,selvalue,nexselid);
    }

}

</script>
js包含叶面
// JavaScript Document
function InitAjax(){
var ajax = false
try{ajax = new ActiveXObject("Msxml2.XMLHTTP");}
catch (e)
    
try { ajax = new ActiveXObject("Microsoft.XMLHTTP");}
    
catch (E) { ajax = false; } 
}

if (!ajax && typeof XMLHttpRequest!='undefined'{ajax = new XMLHttpRequest();} 
return ajax;
}

function datexml(url,value){
  
var number = Math.random();
 
var url = url +"?qaaq=" + number +  value;
 
var ajax = InitAjax();
 ajax.open(
"GET", url, false); 
 ajax.send(
null); 
//ajax.onreadystatechange = function() { }
 if(ajax.readyState == 4 && ajax.status == 200){return ajax.responseText;} 
}
 
function getdatelist(values,selvalues,SelectName){
var getdate = datexml("include/xmlgetp_c_c.asp", values);
        
if(getdate){
            
if(getdate != "wrong" && getdate !="no"){
                
var objSelect = document.getElementById(SelectName); 
                objSelect.options.length
=1;    
                
var datearray = getdate.split("$");                
                
for(i=0;i<datearray.length-1;i++)    {    
                    
var op = window.document.createElement("option");
                        op.value 
= datearray[i].split("|")[0];
                      op.innerHTML 
= unescape(datearray[i].split("|")[1]);
                      objSelect.appendChild(op);
                }

                
if(selvalues != ""){                    
                    
for (i=0;i<objSelect.options.length;i++){
                        
if (objSelect.options[i].value == selvalues){        
                            objSelect.options[i].selected 
= true;
                            
break;
                        }

                    }

                }

            }

        }
    
}

 读取数据库叶面
<!--#include file="dbconn.asp"-->
<%
pid
=request.querystring("pid")
if pid<>"" then
    
if isnumeric(pid)=false then
    response.write 
"wrong"
    
end if
end if
if pid="" then
sql 
= " select zipcode,zipname from ZIPCODEINFO where parentzip is null "
else
sql 
= " select zipcode,zipname from zipcodeinfo where parentzip = '"& pid &"'"
end if
call dbopen
set rs=conn.execute(sql)
if not rs.eof then
do while not rs.eof 
response.write rs(
"zipcode")&"|"&escape(rs("zipname"))&"$"
rs.movenext
loop
else
response.write 
"no"
end if
set rs=nothing
call dbclose
%
>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值