原生的三级联动下拉框
Posted 我是孙大圣
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生的三级联动下拉框相关的知识，希望对你有一定的参考价值。
最近在工作中遇到了一个需要三级联动的功能,之前也只用到过地区联动的三级菜单,还是用的插件,这次就不没那么好了,没办法,自己写咯,我下面的写出来的是原生的;写的不好,不要喷我
一共有三个文件,需要引入jquery;分别是,index.php,data.php和get_two.php三个文件,具体代码如下:
index.php:
<?php
include "./data.php";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
三级联动下拉框:
<select name="one" id="one">
<option value="">一级选项</option>
<?php foreach($result as $key=>$val): ?>
<?php if($val[\'level\']==1):?>
<option value="<?php echo $val[\'code_name\'];?>"><?php echo $val[\'name\']?></option>
<?php endif;?>
<?endforeach;?>
</select>
<select name="two" id="two">
<option value="">二级选项</option>
</select>
<select name="three" id="three">
<option value="">三级选项</option>
</select>
</body>
</html>
<script type="text/javascript" src="../../public/jquery.min.js"></script>
<script>
$("#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=\'<option value="all">请选择</option>\';
for(var i =0 ;i<data.length;i++){
html+=\'<option value="\'+data[i][\'code_name\']+\'">\'+data[i][\'name\']+\'</option>\';
}
$("#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=\'<option value="all">请选择</option>\';
for(var i =0 ;i<data.length;i++){
html+=\'<option value="\'+data[i][\'code_name\']+\'">\'+data[i][\'name\']+\'</option>\';
}
$("#three").empty();
$("#three").append(html);
}
},\'json\');
}
})
</script>
data.php页面:
<?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页面:
<?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);
然后是数据库表:
效果图:
以上是关于原生的三级联动下拉框的主要内容，如果未能解决你的问题，请参考以下文章