layui提高--Select控件使用与动态渲染

1、概述

2、基本Html

<div class="layui-form">
    <div class="layui-row">
        <div class="layui-col-md4">
            <select name="aiHao" id="aiHao" lay-filter="aiHao-filter">
                <option value="1">篮球</option>
                <option value="2">足球</option>
                <option value="3">台球</option>
            </select>
        </div>
    </div>

</div>

3、监听Select的Change事件

<script>
    var $ = layui.$;
    $(function () {
        layui.use(["form"], function() {
            var form = layui.form;
            form.on("select(aiHao-filter)", function (e) {
                //当前选择的索引
                var elem = e.elem;
                //得到选择的几个索引
                var index = elem.selectedIndex;
                console.log("选择了第几个:",index);
                var text = elem[elem.selectedIndex].text;
                var value = e.value;
                console.log("当前text与value值是:",text,value);
            });
        });
    });

</script>

代码说明:

4、Select动态渲染

渲染的语法

form.render(type, filter);
type为select,checkbox,radio等
filter是select,checkbox,radio对应的lay-filter过滤器名称

说明

动态对select赋值option的选项时，需要使用form.render()进行重新渲染

比如有两个select，第一个select 在改变的时候，重新渲染第二个select的option的值

代码如下

//每一个Select在Change的时候,根据每个select的value值来初始化第二个Select控件的值。

动态初始化的时候，需要调用form.render()进行控件的重新渲染

代码

form.on('select(CateInfoCode-Filter)', function(e) {
                var parentCode = e.value;
                var url = "/MemberXxx/GetChildCate?ParentCode=" + parentCode;
                var param = {};
                ajaxSyncPost(url, param, function(data) {
                    $("#childCateInfoCode").html("");
                    $("#childCateInfoCode").append("<option value=''>-请选择-</option>");
                    $.each(data, function(i, item) {
                        var selectedInfo = "";
                        if (curCateCode === item.Code) {
                            selectedInfo = "selected='selected'";
                        }
                        var option = "<option value='"+item.Code+"' "+selectedInfo+">"+item.CateInfoName+"</option>";
                        $("#childCateInfoCode").append(option);
                    });
                    form.render("select");

            });