AJAX兑现简单的省市二级联动

AJAX实现简单的省市二级联动

基本思路：前台的下拉框值改变时，AJAX将值传入后台的servlet进行处理，根据不同的值返回不同的JSON数据，然后前台进行解析成字符数组，添加到option中.

index.jsp

<br>Servlet: CityAction.java</p><p><strong></strong><textarea name="code" alt="AJAX兑现简单的省市二级联动"><br><br><img style="max-width: 100%;height: auto;width: auto\9;" src="//img.reader8.net/uploadfile/jiaocheng/2014/011342/201401132342573200.png" alt="AJAX兑现简单的省市二级联动"><br></p> </p></div><div style="margin:0 auto;width:300px;height:250px;position:relative;"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6147101717324856" data-ad-slot="1958144088" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <div class="subn-nav"><a href="//m.reader8.net">读书人网</a> ><a href="//m.reader8.net/jiaocheng/ajax/">Ajax</a></div><div class="sp-jctu"><h3><span> 热点推荐 </span></h3><ul><li><p><a href="//m.reader8.net/jiaocheng/20140427/2315877.html">ssh的图片上传实际案例</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140426/2314918.html">A页面通过showmodaldialog传递多个参数</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140425/2313938.html">getScript getJson 取值有关问题求大</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140425/2313937.html">IE使用jquery load加载的内容里不能调</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140423/2311917.html">ajax 返回值读取有关问题</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140422/2310791.html">.getJSON无法打开Json文件,该如何处理</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140422/2310790.html">jquery图片九宫格式样布局图片切换IE浏</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140421/2309541.html">JQuery Ajax 提交表单不能获取参数,该</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140421/2309540.html">jquery ajax跨域出错</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140420/2308582.html">jquery ajax跟 Js的ajax区别</a></p></li> </ul></div><div style="display:none;"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?d6151f323a57d16696165e47eee86d53"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script></div> <div class="footer"><p>触屏版 | <a href="//www.reader8.net/jiaocheng/20120903/1347730.html#fromapp">电脑版</a></p><p>读书人网 m.reader8.net</p></div> <script language="javascript"> function clickme(sad){ var divobjdiv = document.getElementById("divobjdiv" + sad); if(divobjdiv.style.display =="none"){ divobjdiv.style.display ="block"; }else{ divobjdiv.style.display ="none"; } var wenzi = document.getElementById('divobjimg' + sad); if(wenzi.innerText == "收起"){ wenzi.innerText = "查看更多"; }else{ wenzi.innerText = "收起"; } } </script> <div id="back-top"><a href="#top"><span></span></a></div> </body> </html>