Of Stack

ajax+jQuery implements a cascading display of addresses

  • 2020-06-07 04:01:07
  • OfStack

This article describes the example of ajax+jQuery to achieve a cascading display address method. Share to everybody for everybody reference. Specific implementation methods are as follows: 


<%@ page language="java" import="java.util.*" pageEncoding="utf-8"
contentType="text/html; charset=utf-8"
%>
<html>
<head>
 <title> Initialize the HELLO</title>
 <script type="text/javascript" src="../../js/jquery.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
  var str1='${str}';
  var strArr=str1.split(",");
  var k;
  for(k=0;k<strArr.length;k++)
   {
   $.ajax({
   async:false,// So that's it , Otherwise, AJAX is 1 Sent up , Plus that , This ensures that the request has a result , Will send 1 A request 
   url:'init.action',// The request of URL
   cache: false, // Do not fetch data from the cache 
   data:{pid:strArr[k]},// Parameters sent 
   type:'Get',// Request type 
   dataType:'json',// The return type is JSON
   timeout:20000,// timeout 
   error:function()// Error handling 
   {
   alert(" Application error !");
   },
   success:function(json)// Successfully processed 
   {
    var len=json.length;// Retrieves the length of the array 
   if(strArr[k]=="0")// Top item of 
   {   
    $("<select id='no1' style='width:80px' onchange='show()'></select>").appendTo("#content");// in content add select The element 
    $("<option value='-1'> Please select a </option>").appendTo("#no1");
    for(var i=0;i<len;i++)// Add query to data loop to select In the 
    {
    $("<option value="+json[i].channelId+">"+json[i].channelName+"</option>").appendTo("#no1");
    }
    }
    else
    {
    $("<select stype='width:80px' onchange='show()'></select>").appendTo("#content");
    $("<option value='-1'> Please select a </option>").appendTo("#content>select:last");
    for(var i=0;i<len;i++)
    {
     $("<option value="+json[i].channelId+">"+json[i].channelName+"</option>").appendTo("#content>select:last");
    }
     $("#content>select:eq("+(k-1)+")>option[@value="+strArr[k]+"]").attr("selected","true");// Set the selected 
     if(len==0)// The last 1 level , Just delete it if there's nothing left 
     {
     $("#content>select:last").remove();
     }
    }
   }
  });
  }//for End of the loop 
 });
 function show()
 {
 var obj=event.srcElement;// Gets the object of the current event , That's what you ordered select, So what we get here is that object 
 var currentObj=$(obj);// will JS Object conversion to jQuery object , This is how the method can be used 
 var s1=$(obj).nextAll("select");// Find the one following the current click select object 
 s1.each(function(i){
 $(this).remove();// The loop deletes them 
 });
 var value1=$(obj).val();
 $.ajax({
 url:'init.action',
 cache:false,
 data:{pid:value1},
 type:'Get',
 dataType:'json',
 timeout:20000,
 error:function()
 {
  alert(" Error! ");
 },
 success:function(json)
 {
  var len=json.length;
  if(len!=0)
  {
  $("<select style='width:80px' onchange='show()'></select>").appendTo("#content");
   $("<option value='-1'> Please select a </option>").appendTo("#content>select:last");
   for(var i=0;i<len;i++)
   {
   $("<option value="+json[i].channelId+">"+json[i].channelName+"</option>").appendTo("#content>select:last");
   }
  }
 }
 });
 }
 </script>
</head>
<body>
 <h1>
  Display administrator information 
 </h1>
<table width="50%" border="1">
<tr>
<td> Administrator number </td><td><input type="text" value="${admin.adminId}"></td>
</tr>
<tr>
<td> Administrator account </td><td><input type="text" value="${admin.adminAccount}"> </td>
</tr>
<tr>
<td> Administrator name </td><td><input type="text" value="${admin.adminName}"> </td>
</tr>
<tr>
<td> Administrator password </td><td><input type="text" value="${admin.password}"> </td>
</tr>
<tr>
<td> Administrative possession </td><td><input type="text" value="${admin.channelid}"> </td>
</tr>
</table>
 <div id="content"
 style="width: 500px; border: 1px; border-style: solid; background-color: lightblue;">
 </div>
</body>
</html>

Hopefully, this article has been helpful in your jquery programming.

Related articles: