Ajax dynamically adds data to the drop-down list.

Ajax dynamically adds data to the drop-down list.

1. Create a New drop-down control in front-end jsp

<select id="seldvd" onChange="sel_onchange(this)"></select> 

2. js section, create a function method, and use ajax to point to the servlet section of 'getalltypes. action' to obtain the data from the drop-down list and dynamically fill it in.

<Span style = "white-space: pre"> </span> function loadType () {<span style = "white-space: pre"> </span> $. get (<span style = "white-space: pre"> </span> 'getalltypes. action ', <span style = "white-space: pre"> </span> function (data) {<span style = "white-space: pre "> </span> var $ sel =$ (" # seldvd "); <span style =" white-space: pre "> </span> // console. log (data); <span style = "white-space: pre"> </span> for (var I = 0; I <data. length; I ++) {<span style = "white-space: pre"> </span> <span style = "white-space: pre "> </span> $ item = $ (" <option> </option> "); // Add option <span style =" white-space: pre "> </span> <span style =" white-space: pre "> </span> $ item. val (data [I]. id); // Add option value, <span style = "line-height: 1.5; white-space: pre-wrap; font-family: Arial, Helvetica, sans-serif; "> <span style =" font-size: 10px; "> data stored with id and type in the database </span> <span style =" white-space: pre "> </span> <span style =" white-space: pre "> </span> extends item.html (data [I]. type); // Add option data <span style = "white-space: pre"> </span> <span style = "white-space: pre "> </span> $ sel. append ($ item); // Add option to select <span style = "white-space: pre"> </span >}< span style = "white-space: pre "> </span >}, 'json' <span style =" white-space: pre "> </span>); <span style =" white-space: pre "> </span>}

3. Create a servlet page to return data to Ajax.

Public void doGet (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request. setCharacterEncoding ("UTF-8"); ArrayList <typeInfo> typeList = new ArrayList <typeInfo> (); typeDao td = new typeDao (); typeList = td. getAllTypes (); JSONArray arr = new JSONArray (typeList); // The imported data packet needs to be converted to json String jsString = arr. toString (); // responds to the client request. setCharacterEncoding ("UTF-8"); response. setContentType ("text/plain; charset = UTF-8"); response. getWriter (). print (jsString); // return the json format data required in the drop-down list}

4. Where is the data source? Of course, in the database (MySQL ). Therefore, you must first write a method to read data from the database.

<strong>typeInfo.java</strong> 

import java.io.Serializable; public class typeInfo implements Serializable {   private int id;   private String type;   public int getId() {     return id;   }   public void setId(int id) {     this.id = id;   }   public String getType() {     return type;   }   public void setType(String type) {     this.type = type;   }   public typeInfo(){   }   public typeInfo(int id, String type) {     this.id = id;     this.type = type;   } } 

TypeDao. java (JDBC package needs to be imported)

Import java. SQL. connection; import java. SQL. preparedStatement; import java. SQL. resultSet; import java. util. arrayList; import model. typeInfo; public class typeDao extends baseDao {public ArrayList <typeInfo> getAllTypes () {ArrayList <typeInfo> typeList = new ArrayList <typeInfo> (); Connection con = null; preparedStatement psm = null; ResultSet rs = null; try {con = super. getConnection (); psm = con. prepareStatement ("select * from types"); rs = psm.exe cuteQuery (); while (rs. next () {typeInfo types = new typeInfo (); types. setId (rs. getInt (1); types. setType (rs. getString (2); typeList. add (types) ;}} catch (Exception e) {System. out. println ("show all types error:" + e. getMessage ();} finally {super. closeAll (rs, psm, con);} return typeList ;//}}

4. Now, use Tomcat to open the webpage and the data will be displayed in the drop-down list.

The above section describes how to add data to the drop-down list using Ajax. I hope it will be helpful to you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!