jQuery+php实现二级联动

public function liandong(){
$arr = Db::table("city")->where("pid=0")->select();
return view('liandong',['arr'=>$arr]);
}

//输出联动json
public function liandong_json(){
$pid = Request::instance()->param('pid');
$arr = Db::table("city")->where("pid='$pid'")->select();
echo json_encode($arr);
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>


<select id="one">
{volist name="arr" id="v"}
<option value="{$v.id}">{$v.c_name}</option>
{/volist}
</select>

<select id="two">
<option value="北京">北京</option>
</select>

<script src="__STATIC__/js/jquery.js"></script>
<script>
$(document).on('change','#one',function(){
var pid = $(this).val();
//ajax请求后台数据
$.get("{:url('Two/liandong_json')}?pid="+pid,function(data){
var res = JSON.parse(data);
var str = "";
// <option value='--请选择--' class='two'>--请选择--</option>
$.each(res,function(k,v){
str += "<option value='"+v.id+"'>"+v.c_name+"</option>";
})

$("#two").empty();
$("#two").append(str);
        //$("#two").html(str);也是可以的
})
});
</script>
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/DXYHW/p/10551012.html