三级联动 (html+js+php 实现三级联动下拉选择框)

版权声明：如有原创标签 转载请标明出处 https://blog.csdn.net/qq_41734645/article/details/82414650

效果图

HTML ：

<!--选定分类-->
<form action="{:U('Classify/classify_detail',array())}" method="post" id="" name="myform" enctype="multipart/form-data">
    &emsp;&emsp;
    第一级分类
<select id="first" name="name_1" onchange="getAchild(this.value,this.id)">
    <option value="">----请选择---</option>
</select>
&emsp;
二级
<select id="second" name="name_2" onchange="getAchild(this.value,this.id)">
    <option value="">----请选择---</option>
</select>
&emsp;
三级
<select name="name_3" id="third">
    <option value="">----请选择---</option>
</select>
&emsp;&emsp;
<input class="submit" value="选定" type="submit">
</form>

JS:

//初始化数据
window.onload= function ()
 {
     $.post(
         "{:U('Classify/select_classify')}",
         {
             key:1
         },
         function (data){
             //confirm(data);
             var info=eval(data);
             for(var i=0;i<info.length;i++){
                // confirm(info[i].type_name);
                 var sel=$('#first');
                 sel.append("<option value='"+info[i].type_name+"'>"+info[i].type_name+"</option>");
             }

         }
     );
     return;
 };
//父级分类选定 获得子级分类数据
function getAchild(val,id) {
   // confirm(id);
    var  sel;
    if(id=='first'){
        $('#second').empty();//清空二级分类框
        sel=$('#second');
    }
    if(id=='second') {
        $('#third').empty();//清空三级分类框
        sel=$('#third');
    }
    $.post(
        "{:U('Classify/select_classify')}",
        {
            type_parent:val,
            key:2
        },
        function (data){
            //confirm(data);
            var info=eval(data);
            sel.append("<option  value=''>----请选择---</option>");
            for(var i=0;i<info.length;i++){
                // confirm(info[i].type_name);
                //var sel=$('#second');
                sel.append("<option value='"+info[i].type_name+"'>"+info[i].type_name+"</option>");
            }

        }
    );
}

PHP:

function select_classify(){
          if(empty($_POST)){
              $this->display('Classify');
          }else{
              $Classify=new ClassifyModel();

              if($_POST['key']==1){
                  $info=$Classify->query("select * from sp_classify where type_parent='0'");
                  $this->ajaxReturn($info);
              }
              if($_POST['key']==2){
                  $info=$Classify->query("select * from sp_classify where type_parent='{$_POST['type_parent']}'");
                  $this->ajaxReturn($info);
              }
          }
      }