ThinkPHP uses Heart Score Sharing ThinkPHP + Ajax to implement a 2 level Active drop down menu

First is the design of the database.The classification table is called cate.

I do two cascades of categorical data, the fields required for the data are: id, name (Chinese name), pid (parent id).

Settings for parent id: If the data has no parent 1, parent id is 0, and if there is a parent, parent id is id of the parent 1.

Once the database has content, you can start writing code to implement two cascades.

Get all pid 0 data in the background, save it in $cate, and then in the first layer < select > In the foreach loop output.

Html code:

<select name="type" size="1" id="type">
    <option> Please select a 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:

  $('#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 triggers after the first layer type changes, and the main parameters of the ajax method are

1.url: The address where the ajax is received in the background;

2.data: Data sent to the background, 1 is usually transmitted by json;The id value of the selected class is passed here.

3.type: Transfer methods, there are get and post methods, I generally use post, can transfer more data than get, and security is higher;

4. error: Method of ajax execution failure;

5.success: ajax executes a successful method, called a callback function.When I execute success here, I empty the contents of the second drop-down menu with empty (), then output the data I get from the background.

Here is the page Thinkphp receives and processes ajax data

// Backstage ajax Verification 
  $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 seen as $_POST[], which gets id from the first layer selection passed by ajax, then gets its subclasses, then returns them to ajax with ajaxReturn(), where the return data is set to be json, so ajax receives the data as json

How native php returns data:

   // Search results are $result
   .....
   echo json_encode($result);

This completes the implementation of the two-level drop-down menu. It is important to note that url must be correct and return values are required for background receipts, otherwise ajax will not execute the success method.