Supposons que vous souhaitez remplir la liste déroulante Etat en fonction d'une valeur que vous sélectionnez dans la liste déroulante Pays. Si vous sélectionnez Australie dans la liste déroulante Pays, la liste déroulante Etat affiche les états de l'Australie. La procédure ci-dessous décrit la marche à suivre.
-
Créez une servlet basée sur le paramètre de requête Pays, qui renvoie un tableau contenant les noms des états du pays.
@Component(metatype = false) @Service(value = Servlet.class) @Properties({ @Property(name = "sling.servlet.resourceTypes", value = "/apps/populatedropdown"), @Property(name = "sling.servlet.methods", value = {"GET", "POST"}), @Property(name = "service.description", value = "Populate states dropdown based on country value") }) public class DropDownPopulator extends SlingAllMethodsServlet { private Logger logger = LoggerFactory.getLogger(DropDownPopulator.class); protected void doPost(SlingHttpServletRequest request, final SlingHttpServletResponse response) throws ServletException, IOException { response.setHeader("Access-Control-Allow-Origin", "*"); response.setContentType("application/json"); response.setCharacterEncoding("UTF-8"); try { String US_STATES[] = {"0=Alabama", "1=Alaska", "2=Arizona", "3=Arkansas", "4=California", "5=Colorado", "6=Connecticut", "7=Delaware", "8=Florida", "9=Georgia", "10=Hawaii", "11=Idaho", "12=Illinois", "13=Indiana", "14=Iowa", "15=Kansas", "16=Kentucky", "17=Louisiana", "18=Maine", "19=Maryland", "20=Massachusetts", "21=Michigan", "22=Minnesota", "23=Mississippi", "24=Missouri", "25=Montana", "26=Nebraska", "27=Nevada", "28=New Hampshire", "29=New Jersey", "30=New Mexico", "31=New York", "32=North Carolina", "33=North Dakota", "34=Ohio", "35=Oklahoma", "36=Oregon", "37=Pennsylvania", "38=Rhode Island", "39=South Carolina", "40=South Dakota", "41=Tennessee", "42=Texas", "43=Utah", "44=Vermont", "45=Virginia", "46=Washington", "47=West Virginia", "48=Wisconsin", "49=Wyoming"}; String AUSTRALIAN_STATES[] = {"0=Ashmore and Cartier Islands", "1=Australian Antarctic Territory", "2=Australian Capital Territory", "3=Christmas Island", "4=Cocos (Keeling) Islands", "5=Coral Sea Islands", "6=Heard Island and McDonald Islands", "7=Jervis Bay Territory", "8=New South Wales", "9=Norfolk Island", "10=Northern Territory", "11=Queensland", "12=South Australia", "13=Tasmania", "14=Victoria", "15=Western Australia"}; String country = request.getParameter("country"); JSONArray stateJsonArray = new JSONArray(); if (country.length() > 0) { if ("australia".equalsIgnoreCase(country)) { stateJsonArray = new JSONArray(); for (String state : AUSTRALIAN_STATES) { stateJsonArray.put(state); } } else if ("unitedstates".equalsIgnoreCase(country)) { stateJsonArray = new JSONArray(); for (String state : US_STATES) { stateJsonArray.put(state); } } response.setContentType("application/json"); response.getWriter().write(stateJsonArray.toString()); } } catch ( Exception e) { logger.error(e.getMessage(), e); } } }
-
Créez un formulaire adaptatif et ajoutez deux listes déroulantes, Pays et Etat, à ce dernier. La liste Pays peut contenir les noms des pays. La liste Etat peut remplir de manière dynamique les noms des états pour le pays sélectionné dans la première liste.
Ajoutez les noms des pays à afficher dans la liste Pays. Dans la liste Etat, ajoutez un script pour la remplir selon le nom du pays de la liste Pays.
JSON.parse( $.ajax({ url: "/apps/myfolder/demo/dropdown", type: "POST", async: false, data: {"country": country.value}, success: function(res){}, error : function (message) { guideBridge._guide.logger().log(message); successFlag = false; } }) .responseText);
Telechargement