Jquery Ajax No Refresh load Select value code

JS Part *******/

t//here calls the Prototype.js package, $ ("AA") equivalent to document.getElementById ("AA");

JS section. First invoke the AJAX application of prototype

The code is as follows

Copy Code

function Getselectarr (id,type) { var url = '/action.php '; PHP page var pars = "Type=" + type + "&id=" + ID; Parameter stitching Post method commits and executes the callback function ' Createselect ' var ajax=new ajax.request (url,{method: ' Post ', Parameters:pars,oncomplete:createselecet}); } function Createselecet (info) { JSON string, the return value of Ajax. Prototype Die (Json_encode (Array ($text, $value), Array ($text 2, $value 2)); var arr = eval (info.responsetext); Create a SELECT element var select = Document.createelement ("select"); Add attributes to select Select.setattribute ("name", "commu_album_id"); for (Var i=0 i < arr.length; i++) { Add option to select Select.options.add (New Option (arr[i][0],arr[i][1)); $ ("target_commu_album_id"). innserhtml = ""; Add a Select to a label $ ("target_commu_album_id"). appendchild (select); }

/*************php Part *******/

The PHP section primarily receives IDs and type

The code is as follows	Copy Code
T$id = $_request[' id ']; $type = $_request[' type '];

Then query the information that you want to appear in the Select box and put it in an array in order, such as array (option value, Optiontext). JSON is then converted to JSON and transferred out or placed in die (), and JS can be received.

such as execution

The code is as follows	Copy Code
Tdie ( Json_encode ( Array Array (1, "admissions Department"), Array (2, "Finance Department"), Array (3, "administrative department"), )));

Note: Only values are placed in the array, do not add keys.

So in the JS Createselect (info)

The code is as follows	Copy Code
var arr = eval (info.responsetext);

ARR is the number group, arr[0][0] = 1,arr[0][1]= "Admissions Department".

The code is as follows	Copy Code
Arr[1][0] = 2,arr[1][1]= "Finance Department"

Another way, if you use the above trouble we can be used full JS linkage menu effect

Super simple JS two level linkage menu

The code is as follows

Copy Code

<script language= "JavaScript" > subcat = new Array (); SUBCAT[0] = new Array ("Test Store", "1", "1"); subcat[1] = new Array ("Jiangxi Rongyu Pharmaceutical Group Co., Ltd.", "1", "2"); var onecount=2; function Changelocation (LocationID) { Document.registerform.cityareaid.length = 1; var Locationid=locationid; var i; var nindex; For (I=0;i < onecount; i++) { if (subcat[i][1] = = LocationID) { Document.registerform.cityareaid.options[document.registerform.cityareaid.length] = new Option (Subcat[i][0], SUBCAT[I][2]); } } } function Dochange (Objtext, Objdrop) { if (!objdrop) return; var str = objtext.value; var arr = str.split ("|"); var nindex = Objdrop.selectedindex; objdrop.length=1; for (var i=0; i<arr.length; i++) { Objdrop.options[objdrop.length] = new Option (Arr[i], arr[i]); } Objdrop.selectedindex = nindex; } </script> <form name= "Registerform" id= "Registerform" method= "POST" action= "" > <select name= "Cityid" id= "Cityid" onblur= "Changelocation" (document.registerform.cityid.options[ Document.registerform.cityid.selectedindex].value) "> <option value= "" >--Unlimited city--</option> <option value=1> Test www.111cn.net</option> </select> <select name= "Cityareaid" id= "Cityareaid" > <option value= "0" >--Unlimited area--</option> </select> </form>