求jsp页中使用Ajax实现多级联动下拉菜单的代码
如题,比如我有一个需要显示国家,省市,城市三个选项的下拉菜单
如何来实现这个三级联动?
请擅长web开发的高手指点!
[解决办法]
随便下载一个ajax框架,可能示例程序里面就有,这个代码很普通,网上随便找一下能够找到很多。
[解决办法]
如果只是国家省市城市的话没必要ajax
js就可以搞定了
随便百度搜下一大把
[解决办法]
用dwr来实现,比较容易啊!
呵呵!
[解决办法]
dwr首选,清晰,明了,简便。
[解决办法]
<script type="text/javascript"> var xmlRequest = null; function startRequest1(url) { if(window.ActiveXObject){ xmlRequest=new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ xmlRequest=new XMLHttpRequest(); } xmlRequest.onreadystatechange = getSelect1; xmlRequest.open("get",url,true); xmlRequest.send(null); } function startRequest2(url) { if(window.ActiveXObject){ xmlRequest=new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ xmlRequest=new XMLHttpRequest(); } xmlRequest.onreadystatechange = getSelect2; xmlRequest.open("get",url,true); xmlRequest.send(null); } function startRequest3(url) { if(window.ActiveXObject){ xmlRequest=new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ xmlRequest=new XMLHttpRequest(); } xmlRequest.onreadystatechange = getSelect3; xmlRequest.open("get",url,true); xmlRequest.send(null); } //一级联动 function getSelect1() { if (xmlRequest.readyState == 4){ if (xmlRequest.status == 200){ var xmlDoc=xmlRequest.responseXML; var s2=document.getElementById("organSecond"); var tag=xmlDoc.getElementsByTagName("organSecond"); for(var j=s2.length;j>=0;j--){ s2.options.remove(i); } for(var i=0;i<tag.length;i++){ var id=tag[i].childNodes[0].childNodes[0].nodeValue; var va=tag[i].childNodes[1].childNodes[0].nodeValue; var op=new Option(va,id); s2.options.add(op); } select2(); } } } //二级联动 function getSelect2() { if (xmlRequest.readyState == 4){ if (xmlRequest.status == 200){ var xmlDoc=xmlRequest.responseXML; var s3=document.getElementById("organThird"); var tag=xmlDoc.getElementsByTagName("organThird"); for(var j=s3.length;j>=0;j--){ s3.options.remove(i); } for(var i=0;i<tag.length;i++){ var id=tag[i].childNodes[0].childNodes[0].nodeValue; var va=tag[i].childNodes[1].childNodes[0].nodeValue; var op=new Option(va,id); s3.options.add(op); } } } } function getSelect3() { if (xmlRequest.readyState == 4){ if (xmlRequest.status == 200){ var xmlDoc=xmlRequest.responseXML; var s4=document.getElementById("positionName"); var tag=xmlDoc.getElementsByTagName("positionName"); for(var j=s4.length;j>=0;j--){ s4.options.remove(i); } for(var i=0;i<tag.length;i++){ var id=tag[i].childNodes[0].childNodes[0].nodeValue; var va=tag[i].childNodes[1].childNodes[0].nodeValue; var op=new Option(va,id); s4.options.add(op); } } } } function select1(){ var id = document.getElementById("organFirst").value; var url= "<%=request.getContextPath()%>/servlet/Second?id="+id+"&date="+(new Date().toString()); startRequest1(url); } function select2(){ var id = document.getElementById("organSecond").value; var url= "<%=request.getContextPath()%>/servlet/Third?id="+id+"&date="+(new Date().toString()); startRequest2(url); } function select3(){ var id = document.getElementById("positionSort").value; var url= "<%=request.getContextPath()%>/servlet/Position?id="+id+"&date="+(new Date().toString()); startRequest3(url); }</script>
[解决办法]
LS代码好多啊,国家省市的三级级联需要用ajax,用JS就搞定了
[解决办法]
把后台数据对象设计好(对应数据库表中的主外键关系,或者在代码中体现从属关系),实现相应的查询方法。
在jsp页面,使用DWRUtil.removeAllOptions()和DWRUtil.addOptions()两个方法就可以简单实现。