mysql三级联动下拉菜单_原生的三级联动下拉框

最近在工作中遇到了一个需要三级联动的功能,之前也只用到过地区联动的三级菜单,还是用的插件,这次就不没那么好了,没办法,自己写咯,我下面的写出来的是原生的;写的不好,不要喷我

一共有三个文件,需要引入jquery;分别是,index.php,data.php和get_two.php三个文件,具体代码如下:

index.php:

include "./data.php";

?>

Document

三级联动下拉框:

一级选项

<?php foreach($result as $key=>$val): ?>

二级选项

三级选项

$("#one").change(function(){

var id =  $(this).val();

if(id){

$.post("./get_two.php",{id:id,level:2},function(data){

if(data){

console.log(data);

html='请选择';

for(var i =0 ;i

html+=''+data[i]['name']+'';

}

$("#two").empty();

$("#two").append(html);

}

},'json');

}

})

$("#two").change(function(){

var id =  $(this).val();

if(id){

$.post("./get_two.php",{id:id,level:3},function(data){

if(data){

console.log(data);

html='请选择';

for(var i =0 ;i

html+=''+data[i]['name']+'';

}

$("#three").empty();

$("#three").append(html);

}

},'json');

}

})

data.php页面:

try{

$pdo = new PDO("mysql:host=localhost;dbname=test","root","root");

}

catch(PDOException $e){

echo "数据库连接失败:".$e->getMessage();

exit;

}

$query = "select * from sanji";

$pdostatement = $pdo->query($query);

$result = $pdostatement->fetchAll(PDO::FETCH_ASSOC);

get_two.php页面:

try{

$pdo = new PDO("mysql:host=localhost;dbname=test","root","root");

}

catch(PDOException $e){

echo "数据库连接失败:".$e->getMessage();

exit;

}

$id = $_POST['id'];

$level = $_POST['level'];

$query = "select * from sanji where level = '$level' and code_name like '$id-%'";

$pdostatement = $pdo->query($query);

$result = $pdostatement->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($result);

然后是数据库表:

效果图: