美文网首页
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