三级联动

html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
    <form action="{:url('save')}" method="post">
        商品名称：<input type="text" name="goods_name">
        <br>
        商品价格：<input type="text" name="goods_price">
        <br>
        市场价格：<input type="text" name="market_price">
        <br>
        商品描述：<input type="text" name="goods_remark">
        <br>
        商品图片：<input type="file" name="goods_logo">
        <br>
<!--        递归处理页面展示-->
        商品类型：
        <select name="cate_id">
            {volist name="data" id="vo"}
            <option value="{$vo.id}">
                {switch name="vo.f" }
                {case value="1"}{$vo.cate_name}{/case}
                {case value="2"}{$vo.cate_name}{/case}
                {case value="3"}{$vo.cate_name}{/case}
                {/switch}
            </option>
            {/volist}
        </select>

        <br/>
<!--        三级联动-->
        商品分类：
        <select name=""  v-model="tid" @change="two">
            <option v-for="item in datas" :value="item.id" >{{item.cate_name}}{{item.pid}}</option>
        </select>
        <select name="" v-model="tids" @change="san">
            <option v-for="item in datas2" :value="item.id" >{{item.cate_name}}{{item.pid}}</option>
        </select>
        <select name="cate_id"  v-model="tidss">
            <option v-for="item in datas3" :value="item.id" >{{item.cate_name}}{{item.pid}}</option>
        </select>
        <br>
        <input type="submit" value="提交">
    </form>

</div>

</body>
</html>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            info:[],
            datas:[],
            datas2:[],
            datas3:[],
            tid:[],
            tids:[],
            tidss:[],
        },
        mounted () {

            axios
                .get('http://www.pyg.com/index.php/liandong/category/two1?id='+this.tid)
                .then(response => (this.datas = response.data.data))
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        },
        methods:{

            two:function () {
                axios
                    .get('http://www.pyg.com/index.php/liandong/category/two1?id='+this.tid)
                    .then(response => (this.datas2 = response.data.data))
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },

            san:function () {
                axios
                    .get('http://www.pyg.com/index.php/liandong/category/two1?id='+this.tids)
                    .then(response => (this.datas3 = response.data.data))
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            }

        }
        
    })

</script>

控制器

    public function two1($id){
        $data=\app\liandong\model\Category::where('pid',$id)->select();
        return json(['code'=>200,'msg'=>'查询成功','data'=>$data]);
    }

 

posted @ 2021-01-24 21:29  Conqueror·  阅读(56)  评论(0)  编辑  收藏  举报