二、三级联动菜单 php+mysql+ajax

原创

Q神 2022-07-22 18:03:00 博主文章分类：php ©著作权

©著作权归作者所有：来自51CTO博客作者Q神的原创作品，请联系作者获取转载授权，否则将追究法律责任

案例一：固定数据，纯html，无php+mysql

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
  <div id="wrap">
    <select name="select1" id="select1">
    <option value="0">请选择课程</option>
      <option value="11">1001</option>
      <option value="22">22</option>
    </select>

  </div>
</body>
  <script>
  $( "#wrap" ).delegate( "select", "change", function( event ) {
      var elem = $( this );
      var tid=elem.attr("id");
      var osplit=parseInt(tid.slice(-1))+1;

        var tidx='select'+osplit;
    var name=elem.text();
     var id=$("#"+tid+"").val();
        //console.log(tid);
        $.ajax({
          type:'get',
          url:'/1.txt',
          data:{
            id:id,
            name:name,
          },
          success:function(data){
            $("#"+tidx+"").nextAll().remove();
            $("#"+tidx+"").remove();
            console.log($("#"+tidx+""));
            var data1=JSON.parse(data);
            var dataArr=[];
            for(var key in data1){
              dataArr.push("<option value='"+data1[key].id+"'>"+data1[key].name+"</option>");
            }
            //$("#"+tid+"").after("<select name='' id='"+tidx+"'>"+dataArr+"</select>")
        if(dataArr!=null && dataArr.length>0){
            $("#"+tid+"").after("<select name='' id='"+tidx+"'>"+dataArr+"</select>")
        }
          }
        })
      //})
  });

  </script>
</html>

1.txt

[{"name":"北京","sex":"男"},{"name":"广州","sex":"女"}]

案例二：读取后台数据 (米拓案例)(二级联动)

二、三级联动菜单 php+mysql+ajax_ajax

只与章节有关,与课程不相关联,二级联动

html代码

<dl id="wrap">
      <dt>课程章节</dt>
      <dd class="ftype_select">
        <div class="fbox">
          <select name="select1" id="select1" data-checked="{$ccid1}" data-required="1">
            <option value="0">请选择课程</option>
<!--
EOT;
$p_arry=DB::get_all("SELECT id,title FROM ".$_M['table']['my_live_course']." where classtype=1 and pid='$pid' ORDER BY id DESC");
foreach($p_arry as $key=>$val){    
echo <<<EOT
-->  
            <option value="{$val['id']}">{$val['title']}</option>
<!--
EOT;

}
echo <<<EOT
-->  
          </select><span id="area_list"></span>
        </div>

      </dd>
    </dl>

JS代码

<script>
  $("#wrap").delegate( "select", "change", function( event ) {
      var elem = $(this);
      var tid=elem.attr("id");
    var id=$("#"+tid+"").val();
    // console.log(tid);
    //console.log(id);
      var osplit=parseInt(tid.slice(-1))+1;
    var name=elem.text();
    var tidx='select'+osplit;
    
      // $("#"+tid+"").on('change',function(){
       
       // console.log(tid);
        $.ajax({
          type:'get',
          url:'{$_M[url][own_form]}a=do_course_type',
          data:{
            id:id,
            name:name,
            /*tid:tid,
            tidx:tidx*/
          },
          success:function(data){
        //console.log(data);
        $("#"+tidx+"").nextAll().remove();
        $("#"+tidx+"").remove();
         // console.log($("#"+tidx+""));
        var data1=JSON.parse(data);
        var dataArr=[];
        for(var key in data1){
          dataArr.push("<option value='"+data1[key].id+"'>"+data1[key].name+"</option>");
        }
        if(dataArr!=null && dataArr.length>0){
            $("#"+tid+"").after("<select name='"+tidx+"' id='"+tidx+"'>"+dataArr+"</select>")
        }
        
          }
        })
     // })
  });

  </script>

php代码：url:'{$_M[url][own_form]}a=do_course_type',

//添加资料  联动菜单
      public function do_course_type() {

        global $_M;
        $id = $_M[form][id];
        $name = $_M[form][name];

          $c_arry=DB::get_all("SELECT id,title FROM ".$_M['table']['my_live_course']." where bigclass='$id' ORDER BY id DESC");
        $k=1;
              $array[0]['id'] = "";  
              $array[0]['name'] = "请选择";  
          foreach($c_arry as $key=>$val){  
              $array[$k]['id'] = $val['id'];  
              $array[$k]['name'] = $val['title'];  
            $k++;
          }     
           echo(json_encode($array)) ;
        
      }

案例三：案例二的加强版(三级联动)

二、三级联动菜单 php+mysql+ajax_html_02

课程、章节都关联，三级联动

html代码(添加时)

功能设计：通过查询课程章，再查询节

<dl id="wrap">
      <dt>课程</dt>
      <dd class="ftype_select">
        <div class="fbox">
          <select name="select1" id="select1" data-required="1">
            <option value="">请选择课程</option>
<!--
EOT;
$p_arry=DB::get_all("SELECT id,title FROM ".$_M['table']['product']." where class1=73 ORDER BY id DESC");
foreach($p_arry as $key=>$val){    
echo <<<EOT
-->  
            <option value="{$val['id']}">{$val['title']}</option>
<!--
EOT;
}
echo <<<EOT
-->  
          </select>
        </div>
      </dd>
    </dl>

或 html代码(修改时要列出相关的内容)

二、三级联动菜单 php+mysql+ajax_json_03

<dl id="wrap">
      <dt>课程</dt>
      <dd class="ftype_select">
        <div class="fbox">
          <select name="select1" id="select1" data-checked="{$_M[form][pid]}" data-required="1">
            <option value="">请选择课程</option>
<!--
EOT;
$p_arry=DB::get_all("SELECT id,title FROM ".$_M['table']['product']." where class1=73 ORDER BY id DESC");
foreach($p_arry as $key=>$val){    
echo <<<EOT
-->  
            <option value="{$val['id']}">{$val['title']}</option>
<!--
EOT;
}
echo <<<EOT
-->  
          </select>
<!--
EOT;
if($f_arry['ccid1']){
echo <<<EOT
-->  
          <select name="select2" id="select2" data-checked="{$f_arry['ccid1']}">
              <option value="">请选择课程章</option>
<!--
EOT;
  $f_1=DB::get_all("SELECT id,title FROM ".$_M['table']['my_live_course']." where pid='$f_arry[pid]' and classtype=1 ");
  foreach($f_1 as $key=>$val1){  
echo <<<EOT
-->  

            <option value="{$val1['id']}">{$val1['title']}</option>
          
<!--
EOT;
}
echo <<<EOT
-->
</select>
<!--
EOT;
}
echo <<<EOT
-->
<!--
EOT;
if($f_arry['ccid2']){
echo <<<EOT
-->  
          <select name="select3" id="select3" data-checked="{$f_arry['ccid2']}">
              <option value="">请选择课程章</option>
<!--
EOT;
  $f_2=DB::get_all("SELECT id,title FROM ".$_M['table']['my_live_course']." where bigclass='$f_arry[ccid1]' and classtype=2 ");
  foreach($f_2 as $key=>$val2){  
echo <<<EOT
-->  

            <option value="{$val2['id']}">{$val2['title']}</option>
          
<!--
EOT;
}
echo <<<EOT
-->
</select>
<!--
EOT;
}
echo <<<EOT
-->
        </div>
      </dd>
    </dl>

JS代码

要点：var tn=$('#wrap select').size();//统计select有几个

统计有多少个下拉框，如果是第一个（tn=1）框改变，是查询章，第二个（tn=2）就是查询节

<script>
  $("#wrap").delegate( "select", "change", function( event ) {
      var elem = $(this);
      var tid=elem.attr("id");
    var id=$("#"+tid+"").val();
    var name=elem.text();
    
      var osplit=parseInt(tid.slice(-1))+1;
    
    var tidx='select'+osplit;
    var tn=parseInt(tid.slice(-1));//统计select有几个
      //var tn=$('#wrap select').size();//统计select有几个
    //console.log(tt);
        $.ajax({
          type:'get',
          url:'{$_M[url][own_form]}a=do_course_type&sid='+tn,
          data:{
            id:id,
            name:name
          },
          success:function(data){
        $("#"+tidx+"").nextAll().remove();
        $("#"+tidx+"").remove();
        var data1=JSON.parse(data);
        var dataArr=[];
        for(var key in data1){
          dataArr.push("<option value='"+data1[key].id+"'>"+data1[key].name+"</option>");
        }
        if(dataArr!=null && dataArr.length>0){
            $("#"+tid+"").after("<select name='"+tidx+"' id='"+tidx+"'>"+dataArr+"</select>")
        }
        //$( "#wrap" ).find('select:empty').remove()
        
          }
        })

  });

  </script>

PHP代码：

//添加资料  联动菜单
      public function do_course_type() {

        global $_M;
        $id = $_M[form][id];
        $name = $_M[form][name];
        $sid = $_M[form][sid];//级别 =1时是查询章  不等于1是查询节
        if($sid==1){//=1时是查询章
          $sid_wh="classtype=1";
          $tt="章";
        }else{//不等于1是查询节
          $sid_wh="bigclass='$id'";
          if($sid==2){
            $tt="节";
          }else{
            $tt="";
          }
        }
        

          $c_arry=DB::get_all("SELECT id,title FROM ".$_M['table']['my_live_course']." where  $sid_wh ORDER BY id DESC");
              $k=1;
              if($sid==1 || $sid==2){
              $array[0]['id'] = "";  
              $array[0]['name'] = "请选择课程".$tt;
              }
          foreach($c_arry as $key=>$val){  
              $array[$k]['id'] = $val['id'];  
              $array[$k]['name'] = $val['title'];  
            $k++;
          }     
           echo(json_encode($array)) ;
        
      }