Use Ajax to display data in a drop-down box, and use ajax to associate a drop-down box

Use Ajax to display data in a drop-down box, and use ajax to associate a drop-down box

When the company is working on a project, it needs to use the drop-down box interaction function to display data, and simply use Ajax to achieve it. If there is plenty of time, it will not go to the demo to find a way to write it. Some of my own ideas may be relatively mentally retarded, and I hope I don't laugh at them.

Two drop-down lists on the page:

<Tr> <td style = "width: 130px"> School: </td> <td style = "width: 100px "> <select id =" college "style =" width: 200px "runat =" server "onchange =" changcollege (this. value) "> <option value =" 0 "> -- select your school. </option> </select> </td> </tr> <td style = "width: 130px "> Major: </td> <td style =" width: 100px "> <select id =" specialty "style =" width: 200px "runat =" server "onchange =" SaveSpecical (this. value) "> <option value =" 0 "> -- select your major -- </option> </select> </td> </tr>

JS script code:

<Script type = "text/javascript"> var http_request = false; function send_request (method, url, content, responseType, callback) // defines the function for sending requests {http_request = false; if (window. XMLHttpRequest) {http_request = new XMLHttpRequest (); if (http_request.overrideMimeType) {http_request.overrideMimeType ("text/xml ");}} else {try {http_request = new ActiveXObject ("Msxml2.XMLHTTP");} catch (e) {try {http_request = new Acti VeXObject ("Microsoft. XMLHTTP");} catch (e) {}} if (! Http_request) {window. alert ("failed to create XMLHttpRequest object"); return false;} if (responseType. toLowerCase () = "text") {http_request.onreadystatechange = callback;} else {window. alert ("ERR"); return false;} if (method. toLowerCase () = "get") {http_request.open (method, url, true);} else if (method. toLowerCase () = "post") {http_request.open (method, url, true); http_request.setRequestHeader ("Content-Type", "applicat Ion/x-www-form-urlencoded ");} else {window. alert ("Err"); return false;} http_request.send (content);} function changcollege (va) // script event triggered when the school drop-down list changes {if (va! = '0') {var speciality = document. getElementById ("specialty"); speciality. disabled = false; var url = "Handler. ashx? Type = college & id = "+ va; send_request (" GET ", url, null," text ", populateClass3) ;}} function populateClass3 () // callback function {var f = document. getElementById ("specialty"); if (http_request.readyState = 4) {if (http_request.status = 200) {var list = http_request.responseText; var classList = list. split ("|"); f. options. length = 1; for (var I = 0; I <classList. length; I ++) // Add the obtained result to the lower-level list box {var tmp = classList [I]. split (","); F. add (new Option (tmp [1], tmp [0]) ;}} else {alert ("the page you requested has an exception. ") ;}}</Script>

We send the http request to Handler. ashx on the server side for processing.

Public class Handler: IHttpHandler {public void ProcessRequest (HttpContext context) {string type = context. request. queryString ["type"]; if (type. equals ("college") {string id = context. request. queryString ["id"]; context. response. contentType = "text/plain"; context. response. write (getSpecialty (id); // This is queried from the database based on the province id. School name and primary key, primary key to check the professional name} public string getSpecialty (string college) {DataSet ds = GetInformation. getSpecialtyInfo (college); string str = ""; for (int I = 0; I <ds. tables [0]. rows. count; I ++) {if (I = ds. tables [0]. rows. count-1) {str + = ds. tables [0]. rows [I] ["SpecialtyID"]. toString () + "," + ds. tables [0]. rows [I] ["SpecialtyName"]. toString ();} else {str + = ds. tables [0]. rows [I] ["SpecialtyID"]. toString () + "," + ds. tables [0]. rows [I] ["SpecialtyName"]. toString () + "|" ;}} return str. trim ();} public bool IsReusable {get {return false ;}}}

Obtain the corresponding major according to the number of the school, and separate the major name with "|" into a string and return it to the client. The client script split string is added to the drop-down box.

The second-level linkage shows that the actual principle of the third-level linkage data is the same.

This is the end of all the content in this article. I hope you can learn how to implement Ajax to display data in a drop-down box.