如题,比如我有一个需要显示国家,省市,城市三个选项的下拉菜单
如何来实现这个三级联动?
请擅长web开发的高手指点!
------解决方案--------------------------------------------------------
随便下载一个ajax框架,可能示例程序里面就有,这个代码很普通,网上随便找一下能够找到很多。
------解决方案--------------------------------------------------------
如果只是国家省市城市的话没必要ajax
js就可以搞定了
随便百度搜下一大把
------解决方案--------------------------------------------------------
用dwr来实现,比较容易啊!
呵呵!
------解决方案--------------------------------------------------------
dwr首选,清晰,明了,简便。
------解决方案--------------------------------------------------------
- Java code
<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>