本文介绍如何在 layui 框架中监听 select 下拉框的选中变化事件。通过 form.on 方法捕获事件,利用回调参数 data 获取原始 DOM 对象,进而提取 select 的 ID 属性或自定义属性(如 data-id),实现动态交互逻辑。
layui 监听 select 选中事件
在 layui 中监听 select 下拉框的选中变化,可以使用 form.on 方法。
获取选中值与 DOM 对象
form.on('select(filter)', function(data){
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
});
除了获取选中的值,还可以获取 select 元素的自定义属性。
获取自定义属性
data.elem.getAttribute("data-id")
以下示例展示了如何获取当前选中 select 的 ID 名称。

获取 select ID 示例
form.on('select', function(data){
//console.log(data.elem); //得到select原始DOM对象
//console.log(data.value); //得到被选中的值
var x = data.elem.getAttribute("id")
console.log(x); //得到被选中的值
//console.log(data.othis); //得到美化后的DOM对象
});
以上介绍了 layui 监听 select 选中并获取 ID 的方法,供参考使用。