1、概述
主要讲解layui如何监听Select的变化，以及获取Select内容的相关值
2、基本Html
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("");
$.each(data, function(i, item) {
var selectedInfo = "";
if (curCateCode === item.Code) {
selectedInfo = "selected='selected'";
}
var option = "";
$("#childCateInfoCode").append(option);
});
form.render("select");
});