Ajax achieves three levels of select Association,

Ajax achieves three levels of select Association,

This article uses ajax technology to obtain data from the database and dynamically implement select three-level association, as shown below:

The front-end js Code is as follows:

<Script type = "text/javascript" src = "jquery/jquery-1.9.1.min.js"> </script> <script type = "text/javascript"> $ (document ). ready (function () {$. ajax ({type: "get", dataType: "text", url: "GetItemAction? Itemlevel = 1 ", success: function (data) {// converts a JSON string to a JSON object var objJSON = eval (" ("+ data + ")"); var len = objJSON. itemInfo. length; var objSelect = document. getElementById ("firstlevel"); for (var I = 0; I <len; I ++) {var op = new Option (objJSON. itemInfo [I]. itemname, objJSON. itemInfo [I]. itemcode); objSelect. add (op) ;}, error: function (XMLHttpRequest, textStatus, errorThrown) {alert (errorThrown) ;}); // display level-2 Category func Tion firstlevel_Click () {var objfirst = document. getElementById ("firstlevel"); var index = objfirst. selectedIndex; // select the index var itemcode = objfirst. options [index]. value; // select the value if (itemcode = 0) {alert ("select event category"); return;} // Delete the second-level category and retain the first var objsecond = document. getElementById ("secondlevel"); for (var I = objsecond. options. length-1; I> 0; I --) {objsecond. options. remove (I);} // Delete the third-level category. retain the first var objthird = document. getElementById (" Thirdlevel "); for (var I = objthird. options. length-1; I> 0; I --) {objthird. options. remove (I) ;}$. ajax ({type: "get", dataType: "text", url: "GetItemAction? Itemlevel = 2 & itemcode = "+ itemcode, success: function (data) {// convert a JSON string to a JSON object var objJSON = eval (" ("+ data + ") "); var len = objJSON. itemInfo. length; var objSelect = document. getElementById ("secondlevel"); for (var I = 0; I <len; I ++) {var op = new Option (objJSON. itemInfo [I]. itemname, objJSON. itemInfo [I]. itemcode); objSelect. add (op) ;}, error: function (XMLHttpRequest, textStatus, errorThrown) {alert (errorThrown ); });} // Display the third-level classification function secondlevel_Click () {var objsecond = document. getElementById ("secondlevel"); var index = objsecond. selectedIndex; // select the index var itemcode = objsecond. options [index]. value; // select the value if (itemcode = 0) {alert ("select event category"); return;} // Delete Level 3 category keep the first var objthird = document. getElementById ("thirdlevel"); for (var I = objthird. options. length-1; I> 0; I --) {objthird. options. remove (I) ;}$. ajax ({type: "get", dataType: "text ", Url:" GetItemAction? Itemlevel = 3 & itemcode = "+ itemcode, success: function (data) {// convert a JSON string to a JSON object var objJSON = eval (" ("+ data + ") "); var len = objJSON. itemInfo. length; var objSelect = document. getElementById ("thirdlevel"); for (var I = 0; I <len; I ++) {var op = new Option (objJSON. itemInfo [I]. itemname, objJSON. itemInfo [I]. itemcode); objSelect. add (op) ;}}, error: function (XMLHttpRequest, textStatus, errorThrown) {alert (errorThrown );}});}

Some html code

<Table class = "table-exposure"> <tr> <td height = "40"> <select id = "firstlevel" onchange = "firstlevel_Click ()" style = "width: 99%; font-size: 1em; "> <option value =" 0 "> select an event Category </option> </select> </td> </tr> <td height =" 40"> <select id = "secondlevel" onchange = "secondlevel_Click () "style =" width: 99%; font-size: 1em; "> <option value =" 0 "> select event classes </option> </select> </td> </tr> <td height =" 40"> <select id = "thirdlevel" style = "width: 99%; font-size: 1em; "> <option value =" 0 "> select an event Category </option> </select> </td> </tr> </table>

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.