美文网首页
layui简单联动菜单

layui简单联动菜单

作者: Stonesy | 来源:发表于2019-05-05 17:36 被阅读0次

    /****layui.js****/

    layui.use(['form','layer','laydate'],function (){

            $ = layui.jquery;

    var form = layui.form

                    ,layer = layui.layer

                    ,laydate = layui.laydate;

    // 监听选中事件

            form.on('select(school)',function (data){

                selectData("{:url('student/getSelect')}",data.value,$('#bkxl'),'选择报考学历');

    //                return false;

            });

    form.on('select(bkxl)',function (data){

                selectData("{:url('student/getSelect')}",data.value,$('#bkzy'),'选择报考专业');

    });

    function selectData(url,pid,obj,title){

                $.ajax({

                    type: "post",

    url: url,

    data: {'school_id': pid,'title':title},

    async: true,

    success: function (res){

                        obj.html(res);

    form.render('select');

    }

                });

    }

        });

    /****HTML****/

    <div class="layui-col-sm3">

        <div class="grid-demo grid-demo-bg1">

            <div class="layui-form-item">

                <label for="type" class="layui-form-label">

                    <span class="x-red">*</span>报考学校

    </label>

                <div class="layui-input-inline">

                    <select id="school" name="school" class="valid" lay-verify="required"  lay-filter="school" >

                        <option value="">选择报考学校</option>

                        {volist name='pinfor' id='pinfor'}

    <option value="{$pinfor.school_id}">{$pinfor.school_name}</option>

                        {/volist}

    </select>

                </div>

            </div>

        </div>

    </div>

    <div class="layui-col-sm3">

        <div class="grid-demo grid-demo-bg1">

            <div class="layui-form-item">

                <label for="bkxl" class="layui-form-label">

                    <span class="x-red">*</span>报考学历

    </label>

                <div class="layui-input-inline">

                    <select id="bkxl" name="bkxl" class="valid" lay-verify="required" lay-filter="bkxl">

                        <option value="">选择报考学历</option>

                    </select>

                </div>

            </div>

        </div>

    </div>

    <div class="layui-col-sm3">

        <div class="grid-demo grid-demo-bg1">

            <div class="layui-form-item">

                <label for="type" class="layui-form-label">

                    <span class="x-red">*</span>报考专业

    </label>

                <div class="layui-input-inline">

                    <select id="bkzy" name="bkzy" class="valid" lay-verify="required" lay-filter="bkzy">

                        <option value="">选择报考专业</option>

                    </select>

                </div>

            </div>

        </div>

    </div>

    /****PHP****/

    public function getSelect(){

        $pinfor = db('school')->where(['pid' => input('school_id'),'state' => 1])->order('myorder')->select();

    $select = '<option value="">'.input('title').'</option>';

    foreach ($pinfor as $key){

            $id = $key["school_id"];

    $name = $key["school_name"];

    $select .= '<option value="'.$id.'">'.$name.'</option>';

    }

        return $select;

    }

    相关文章

      网友评论

          本文标题:layui简单联动菜单

          本文链接:https://www.haomeiwen.com/subject/ijihoqtx.html