The first is the design of the database. The classification table is called Cate.
I do is the classification of data two-level linkage, the data required fields are: Id,name (Chinese name), PID (parent ID).
setting of the Parent ID: If the data is not up to level, the parent ID is 0, and if there is a superior, the parent ID is the ID at the previous level.
After the database has the content, can begin to write the code, carries on the two level linkage realization.
First in the background PHP to get all the PID 0 data, save to $cate, and then in the first layer of <select> with a foreach loop output.
HTML code:
Copy Code code as follows:
<select name= "Type" size= "1" id= "type" >
<option> Please select Type </option>
<foreach name= ' cate ' item= ' V ' >
<option value= ' {$v [' ca_id ']} ' >{$v .ca_name}</option>
</foreach>
</select>
Label:
<select name= "lable" size= "1" id= "lables" >
</select>
Ajax Code:
Copy Code code as follows:
$ (' #type '). Click (function () {
$ (this). Change (function () {
var ObjectModel = {};
var value = $ (this). Val ();
var type = $ (this). attr (' id ');
Objectmodel[type] =value;
$.ajax ({
Cache:false,
Type: "POST",
url:site.web+ "Lable",
DataType: "JSON",
Data:objectmodel,
timeout:30000,
Error:function () {
Alert (site.web+ "lable");
},
Success:function (data) {
$ ("#lables"). empty ();
var count = data.length;
var i = 0;
var b= "";
for (i=0;i<count;i++) {
b+= "<option value= '" +data[i].ca_id+ "' >" +data[i].ca_name+ "</option>";
}
$ ("#lables"). Append (b);
}
});
});
}
);
Ajax code triggers after the first layer type changes, and the main parameters of the Ajax method are
1.url: Background to receive AJAX address;
2.data: Data uploaded to the background, usually passed in JSON; the ID value of the selected class is passed here.
3.type: Pass method, have get and post method, I generally use post, can transmit more data than get, security is also higher;
4.error:ajax the method of execution failure;
5.success:ajax the method of executing successfully, which is the callback function. When I perform success here, I first empty the contents of the second Pull-down menu with empty () and then output the data from the background.
Here are the pages that thinkphp receive AJAX data and process
Copy Code code as follows:
Background Ajax validation
$result = Array ();
$cate =$_post[' type '];
$result = M (' cate ')->where (Array (' Ca_pid ' => $cate))->field (' Ca_id,ca_name ')->select ();
$this->ajaxreturn ($result, "JSON");
The thinkphp I () method can actually be viewed as $_post[] to get the ID of the first level of selection that Ajax passes over, then get its subclass and then return it to Ajax with Ajaxreturn (), which sets the return data in JSON form, So Ajax will receive the data in JSON form
How native PHP returns data:
Copy Code code as follows:
Search results for $result
.....
echo Json_encode ($result);
This completes the 2-level Linkage drop-down menu implementation, it should be noted that the URL must be correct, the background received also need to have return value, otherwise Ajax will not implement success method.