The first is the design of the database. The classification table is called cate.
What I am doing is the second-level linkage of classified data. The fields required for the data are: id, name (Chinese name), pid (parent id).
Parent id Settings: If the data does not have an upper level, the parent id is 0. If there is an upper level, the parent id is the id of the upper level.
After the database has content, you can start writing code to implement secondary linkage.
First get all the data with pid 0 in the background php, save it to $cate, and then use a foreach loop to output it in the first layer's
Html code:
<select name="type" size="1" id="type">
<option>请选择类型</option>
<foreach name='cate' item='v'>
<option value="{$v['ca_id']}">{$v.ca_name}</option>
</foreach>
</select>
标签：
<select name="lable" size="1" id="lables">
</select>Ajax code:
$('#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);
}
});
});
}
);The Ajax code is triggered after the first layer type is changed. The main parameters of the ajax method are
1 .url: The address for receiving ajax in the background;
2.data: The data passed to the background is usually passed in json; what is passed here is the id value of the selected class.
3.type: transfer method, there are get and post methods, I usually use post, which can transmit more data than get, and is more secure;
4.error: ajax execution Failure method;
5.success: The method for successful ajax execution, which is the callback function. When executing success here, I first use empty() to clear the contents of the second drop-down menu, and then output the data obtained from the background.
The following is the page where Thinkphp receives and processes ajax data
//后台ajax验证 $result = array(); $cate =$_POST['type']; $result = M('cate')->where(array('ca_pid'=> $cate))->field('ca_id,ca_name')->select(); $this->ajaxReturn($result,"JSON");
Thinkphp's I() method can actually be regarded as $_POST[], so as to obtain the first layer of selected content passed by ajax id, then, get its subclass, and then use ajaxReturn() to return it to ajax. The return data is set to be in json form, so ajax will receive the data in json form
Native PHP return data method:
//搜索结果为$result ..... echo json_encode($result);
This completes the implementation of the 2-level linkage drop-down menu. It should be noted that the URL must be correct, and there must be a return value when received in the background, otherwise ajax will not execute the success method.
For more sharing of ThinkPHP usage experience - ThinkPHP + Ajax to realize 2-level linkage drop-down menu, please pay attention to the PHP Chinese website for related articles!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
