Select can be used for multiple or single-choice drop-down box effects. If the Interaction Effect is met, we can call them one by one. Next I will introduce Jquery Ajax without refreshing the select value code, for more information, see.
Javascript *******/
T // call the prototype. js package here. $ ("aa") is equivalent to document. getElementById ("aa ");
// Js part. First, call the prototype ajax application.
The Code is as follows: |
Copy code |
Function getSelectArr (id, type) { Var url = '/action. php'; // php page Var pars = "type =" + type + "& amp; id =" + id; // concatenate Parameters // Submit in post mode and execute the callback function 'createselect' Var ajax = new Ajax. Request (url, {method: 'post', parameters: pars, onComplete: createSelecet }); } Function createSelecet (info) { // Json string, ajax return value. // Prototype die (json_encode (array ($ text, $ value), array ($ text2, $ value2 )));) 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 & lt; arr. length; I ++ ){ // Add option to select Select. options. add (new Option (arr [I] [0], arr [I] [1]); $ ("Target_commu_album_id"). innserHTML = ""; // Add select to a tag $ ("Target_commu_album_id"). appendChild (select ); }
|
/************* Php *******/
The php part mainly receives the id and type
The Code is as follows: |
Copy code |
T $ id = $ _ REQUEST ['id']; $ Type = $ _ REQUEST ['type'];
|
Query the information to be displayed in the select box and put it in an array in order, such as array (option value, optionText. Then json is converted to json for output or placed in die (), and js can receive the output.
For example
The Code is as follows: |
Copy code |
Tdie ( Json_encode ( Array ( Array (1, "Recruitment Department "), Array (2, "Finance Department "), Array (3, "Administrative Department "), )));
|
Note: Only values are placed in the array. Do not add keys.
In the createSelect (info) of js
The Code is as follows: |
Copy code |
Var arr = eval (info. responseText ); |
Arr is an array. 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 is to use the full js linkage menu effect if you frequently use the above problems.
Super simple js level-2 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. bKjia. c0m </option> </select>
<Select name = "cityareaid" id = "cityareaid">
<Option value = "0"> -- unlimited Regions -- </option>
</Select> </Form>
|