Using jquery Ajax to implement the two Cascade interactive menu

Source: Internet
Author: User
Tags json

        Two cascade interactive menu, using the Ajax implementation of jquery, specifically implemented as follows, like a friend can refer to the following

        Menu resources are saved in the database. Leverages the Ajax implementation of jquery. The packages used are: Json-lib-2.2.3-jdk15.jar ezmorph-1.0.6.jar json.js jquery.js    JSP page code:  code as follows: <%@ page Contenttype= "text/html; CHARSET=GBK "%>  <%@ taglib prefix=" s "uri="/struts-tags "%>  <script type=" Text/javascript "src= "Js/jquery.js" ></script>  <script type= "Text/javascript" src= "Js/json.js" ></script>   <% String basepath = request.getscheme () + "://" + request.getservername () + ":" + request.getserverport () + req Uest.getcontextpath () + "/";  out.println (basepath); %>    <script type= "Text/javascript" >  JQuery (function ($) { //alert ("OK"); });  function Onchangeshow (oneid) {  $.ajax ({   URL: "<%=basepath%>catejson.whbs",  data: {Parentid:oneid},//Parameter   type: "POST",  cache: false,  dataType: "JSON",//back to JSON data   error:function () {  alert (' Error '); },  success:onchangecallback }); }  function onchangecallback (data) {  document.all[' twoId ']. options.length = 0; Empty the original option  var str= "";  for (var i=0;i<data.length;i++) {  str+= "<option value=" "+data[i". Recordid+ "' >" +data[i].title+ "</option>"  }  $ ("#twoId"). HTML (str); }  </script >  <html>  <body>  <div align= "center" >  Please select department type   <s:select list= " Rfones "listkey=" RecordID "listvalue=" title "Name=" Oneid "theme=" simple "id=" Oneid "value=" Oneid "onchange=" Onchangeshow (this.value) "></s:select>    Please select file type   <s:select list=" Rftwos "listkey=" RecordID "listvalue=" title "Name=" Twoid "theme=" simple "id=" twoid "value=" twoid "></s:select>  </div >  </body>  </html>    Struts action code     code as follows:/**  * des: Get two-Level linkage menu & nbsp * autho:exceljava  * Date:nov, 2009  * @return   * @throws ioexception  */  public String getjsoncategory () throws ioexception{  rfjsons= Archiveservice.getcategorybyparentid (ParentID)//Here get data from database   Net.sf.json.JSONArray jsonobj= Net.sf.json.JSONArray.fromObject (rfjsons)//assembled into JSON data   SendMessage (jsonobj.tostring ());//push JSON data to view   Return null; } /**  * des: Encapsulates data sent in JSON format back to js  * autho:exceljava  * Date:nov 2009  * @param content  * @throws ioexception  */  public void SendMessage (String content) throws Bsp HttpServletResponse response = Servletactioncontext.getresponse ();  response.setcharacterencoding ("UTF-8");   Response.getwriter (). Write (content);   }   
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.