微客导航 » 文章资讯 » Ajax+Servlet实现无刷新下拉联动效果

Ajax+Servlet实现无刷新下拉联动效果

2023-09-20 13:21:05 251

下拉联动的功能可以说非常的常用，例如在选择省、市等信息的时候；或者在选择大类、小类的时候。总之，下拉联动很常用。今天就跟大家分享一个简单的二级下拉联动的功能。

大类下拉框：页面加载的时候就初始化大类的下拉选项，通过后台代码去数据库里面取得数据（当然像省市这样不变的内容可以直接给值），然后加载到下拉选项中。



--全部--
<%
Mapmap=ClientManager.getInstance().getRegionList();
for(Iteratoriter=map.entrySet().iterator();iter.hasNext();){
Map.Entryentry=(Map.Entry)iter.next();
%>
"><%=entry.getValue()%>
<%
}
%>

小类下拉框：小类的下拉选项是通过Ajax将所选大类的内容异步提交到一个Servlet，然后返回相应的小类内容，最后加载到小类下拉选项中。


--全部--

获取并加载小类下拉框的JS代码：


functionselectProv(field){
varxmlHttp=null;
//表示当前浏览器不是ie,如ns,firefox
if(window.XMLHttpRequest){
xmlHttp=newXMLHttpRequest();
}elseif(window.ActiveXObject){
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}
varurl="${pageContext.request.contextPath}/servlet/SelectProvServlet?regionId="+trim(field.value)+"&time="+newDate().getTime();

//设置请求方式为GET，设置请求的URL，设置为异步提交
xmlHttp.open("GET",url,true);

xmlHttp.onreadystatechange=function(){
//Ajax引擎状态为成功
if(xmlHttp.readyState==4){
//HTTP协议状态为成功
if(xmlHttp.status==200){
vardoc=xmlHttp.responseXML;
varitems=doc.getElementsByTagName("item");
//取得小类下拉列表
varprovSelect=document.getElementById("SmallClass");
//清除小类下拉列表中的值
provSelect.options.length=0;
varo=newOption("--全部--",0);
provSelect.add(o);
for(vari=0;i上一篇
python中WSGI是什么，Python应用WSGI详解
                
                                    下一篇
Directory文件类的实例讲解
                            
            
            
                     
                热门推荐 
                                        1 毛坯房验收经验和常识 看了之后再验房心里有底  
                                        2 二手房收房如何交接 二手房收房注意问题  
                                        3 专业验收毛坯房的价格 商品房验收合格的标准  
                                        4 精装房怎么验收 精装房请验房师有用吗  
                                        5 一般要到哪里找验房师 验房师有哪些作用呢  
                                        6 请人验房一般是多少钱 验房师费用是多少  
                                        7 怎样测量房子面积 建筑面积和使用面积怎么算  
                                        8 收房需要注意什么 仔细检查不松懈  
                                        9 收房时三书一证一表是什么 主要作用介绍  
                                        10 交房时交房税费有哪些 本文为你一一讲解  
                                        11 验房都需要验什么 要做哪些准备呢  
                                        12 毛坯房验房师有必要请吗 毛坯房装修完如何验收  
                                        13 地下室防水工程质量验收规范详解  
                                        14 水性涂料、油性涂料区别介绍  
                                        15 零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包  
                                        16 三棵树漆怎么样？三棵树漆官方网站  
                                        17 家庭“装修套餐”中猫腻你知道吗？  
                                        18 小空间大浴望 卫浴间装修巧支招

返回顶部
3162201930
czq8825@qq.com

Ajax+Servlet实现无刷新下拉联动效果

热门推荐

随机推荐