1、概述

主要讲解layui如何监听Select的变化，以及获取Select内容的相关值

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事件

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

代码说明:

form.on("select(aiHao-filter)" 表单来监听过滤器 lay-filter的Select控件。回调函数中的 e.

e.elem 表示是当前的元素

e.elem.selectedIndex表示是选择了第几个元素

e.value表示当前选择了哪一个select的option的值value值

elem[elem.selectedIndex].text 表示选择了哪一个select的option的值text值

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


            });