Question

我的页面中有三个选择框，名为

country
state 
city

我希望州根据州价值显示基于国家价值和城市的选项。如何在struts中使用ajax实现。

 <!DOCTYPE html>
 <html>
 <body>

  <label>country</label>
  <select style="width:25%">
  <option value="volvo">India</option>
  <option value="saab">us</option>
   <option value="audi">uk</option>
    </select>
    <br>

     <label>state</label>
     <select style="width:25%">
     <option value="s"></option>
  <option value="r"></option>
 <option value="q"></option>
 <option value="p"></option>
</select>
<br>
<label>city</label>
 <select style="width:25%">
 <option value="a"></option>
 <option value="b"></option>
 <option value="c"></option>
<option value="d"></option>
</select>

 </body>
 </html>

Answer 1

                         **DropdownCountryAction.java**







   package p1;
   import com.opensymphony.xwork2.Action;
   import java.util.Map;
   import java.util.List;
   import java.util.ArrayList;
   import java.util.HashMap;

   public class DropdownCountryAction {
   private Map<String,String>statemap=new HashMap<String,String>();
   private List<String>citylist=new ArrayList<String>();
   private String country;
   private String state;
   private String city;
public Map<String,String> getStatemap() {
    return statemap;
}
public void setStatemap(Map<String,String> statemap) {
    this.statemap = statemap;
}
public List<String> getCitylist() {
    return citylist;
}
public void setCitylist(List<String> citylist) {
    this.citylist = citylist;
}
public String getCountry() {
    return country;
}
public void setCountry(String country) {
    this.country = country;
}
public String getState() {
    return state;
}
public void setState(String state) {
    this.state = state;

}
public String getCity() {
    return city;
}
public void setCity(String city) {
    this.city = city;
}


public String execute(){
    if(country.equals("india")){

        statemap.put("1", "jharkhand");
        statemap.put("2", "bihar");
    }

    else if(country.equals("us")){
        statemap.put("3", "california");
        statemap.put("4", "texas");
    }
    return Action.SUCCESS;
}


public String cityexecute(){
    if(state.equals("2")){
        citylist.add("Sasaram");
        citylist.add("kudra");
    }
    else if(state.equals("1")){
        citylist.add("ranchi");
        citylist.add("bokaro");
    }

    else if(state.equals("3")){
        citylist.add("yuba city");
        citylist.add("beach city");
    }

    else if(state.equals("4")){
        citylist.add("cactus");
        citylist.add("calvert");
    }
    return Action.SUCCESS;

     }

     }



                                        **struts.xml**



           <?xml version="1.0" encoding="UTF-8" ?>
             <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration  2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
               <struts>
                 <package name="default" extends="struts-default" namespace="/">
                    <action name="countryAction" class="p1.DropdownCountryAction">
                 <result name="success">/state.jsp</result>
                        </action>


                  <action name="stateAction" class="p1.DropdownCountryAction"  method="cityexecute">
             <result name="success">/city.jsp</result>
               </action>
        </package>
          </struts>  

                                      ***index.jsp*** 



           <%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
               <%
                 String path = request.getContextPath();
               String basePath =      request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
           %>

               <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
            <html>
              <head>
   <base href="<%=basePath%>">

     <title>My JSP 'index.jsp' starting page</title>
        <meta http-equiv="pragma" content="no-cache">
      <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">    
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
         <!--
           <link rel="stylesheet" type="text/css" href="styles.css">
              -->
         </head>
           <script>
            function onCountryChange(str)
           {
             var xmlhttp;
             if (window.XMLHttpRequest)
             {// code for IE7+, Firefox, Chrome, Opera, Safari
                 alert(str);
           xmlhttp=new XMLHttpRequest();
               }
               else
            {// code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
           }
             xmlhttp.onreadystatechange=function()
          {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
            document.getElementById("conid").innerHTML=xmlhttp.responseText;
              }
                };
             xmlhttp.open("GET","countryAction?country="+str,true);
              xmlhttp.send();
            }



           function onStateChange(str)

             {
           var xmlhttp;
            if (window.XMLHttpRequest)

                {// code for IE7+, Firefox, Chrome, Opera, Safari
                  alert(str);
               xmlhttp=new XMLHttpRequest();
                 }
                     else
                {// code for IE6, IE5
               xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }
                xmlhttp.onreadystatechange=function()
                 {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                     {
           document.getElementById("stateid").innerHTML=xmlhttp.responseText;
            }
                };
                 xmlhttp.open("GET","stateAction?state="+str,true);
                  xmlhttp.send();
                }

          </script>
               <body>
         <table>
             <tr>
              <td>
         Select country name
                   </td>
            <td>
                   <select name="country" onchange="onCountryChange(this.value)">
                 <option value="">--choose--</option>
               <option value="india">india</option>
                    <option value="us">us</option>
                 </select>
               </td>
              </tr>

                 <tr>

              <td>
          Select State name
             </td>
                <td>
              <div id="conid">
                <select name="state" onchange="onStateChange(this.value)">
             <option value=" ">--choose</option>

            </select>
         </div>
        </td>
            </tr>

       <tr>
      <td>
       Select city name
            </td>
              <td>
              <div id="stateid">
              <select name="city">
            <option value=" ">--choose</option>
                 </select>
              </div>
                  </td>
                 </tr>


                </table>
                  </body>
                   </html>




                                        **state.jsp**



      <%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
     <%@ taglib uri="/struts-tags" prefix="s" %>
     <s:select list="statemap" name="state" headerKey="0" headerValue="select"   onchange="onStateChange(this.value)"></s:select>




                                          **city.jsp**





       <jsp:directive.page language="java" import="java.util.*" pageEncoding="ISO-8859-1"/>
    <jsp:directive.taglib uri="/struts-tags" prefix="s1"/>
    <s1:select list="citylist" name="city" headerKey="0" headerValue="select"/>





                                              **web.xml**




       <?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-  app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee    http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
    <display-name>DropdownCountrystatecity</display-name>
     <welcome-file-list>

    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <filter>
    <filter-name>struts2</filter-name>
    <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>struts2</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

使用ajax在struts中依赖选择下拉列表

1 个答案: