Layui下拉框跳转必须用form.on('select(filter)')监听,而非原生change事件;需设lay-filter、包裹于layui-form内,并校验data.value防空跳转;按钮须加type="button"防表单提交;移动端需加touch-action:manipulation样式。

form.on('select(filter)') 是唯一能触发跳转的入口
直接给 <select> 绑原生 change 事件基本无效——Layui 渲染后会隐藏原生元素,真实交互发生在它生成的 dl/dd 上。你监听的 DOM 根本没被点击。
必须用 Layui 表单模块提供的标准监听方式:
- 确保
<select lay-filter="jumpSelect">有lay-filter属性 - 确保该
select被包裹在<form class="layui-form">内 - 在
layui.use(['form'], function() { ... })中注册监听
示例代码:
layui.use(['form'], function(){
var form = layui.form;
form.on('select(jumpSelect)', function(data){
var url = '/page?mode=' + encodeURIComponent(data.value);
window.open(url, '_blank');
});
});
跳转前必须校验 value 和字段名
常见错误是假设后端返回的字段叫 id,但实际可能是 code、type_id 或空字符串。一旦拼出 /page?mode= 这种无效 URL,用户点开就是 404。
- 先判断
if (!data.value),避免空值跳转 - 不要写
$(data.elem).val(),data.value就是最新选中值,多查一次 DOM 可能拿错 - 如果跳转依赖多个字段(比如
category+subType),得提前存到data.elem的dataset或用form.val()拿整个表单值
别让 type="submit" 暗中刷新页面
很多下拉框放在 <form> 里,又没显式写 type="button",浏览器默认把按钮当 submit 处理。自动跳转后页面闪一下——不是 JS 错了,是表单提交了。
- 检查触发跳转的按钮 HTML,确认写了
type="button" - 如果用的是
layer.msg或弹窗里的按钮,也要加type="button",否则父级表单可能被意外提交 - 实在不确定,加一行
e.preventDefault()(前提是事件对象存在)
移动端点击失效?加 touch-action
在 iOS 或部分安卓 WebView 中,下拉框选项点击无反应,大概率是 CSS 阻断了触摸行为。Layui 默认不处理这个。
给下拉框容器加一行样式即可:
.layui-form-select dl { touch-action: manipulation; }
这行不是可选优化,是真机调试时最常补的一行。漏掉它,用户点十次都不跳,你还以为是 JS 没绑上。


















