jQuery+php实现二级联动

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);
    }

html代码：

<!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>

posted @ 2018-09-13 11:41 车车大人阅读(407) 评论(0) 收藏举报

刷新页面返回顶部