参考链接:JS实现select选中option触发事件操作示例、layui 如何取得select下拉框选中的值
需求:
- 根据下拉框选中的内容实现对应的操作,例:选中下拉框中的开始给某个标签添加禁用
- 获得下拉框中选中的值
实现:
1.使用layui的下拉框,添加事件只能通过form.on(...)的形式
html页面
<select id="status" name="status" lay-filter="onClickSelected" required>
<option value="start">开始</option>
<option value="end">结束</option>
</select>
js
layui.use(['form', 'ax'], function () {
var $ = layui.jquery;
var $ax = layui.ax;
//先引用form
var form = layui.form;
//下拉选中的值,document.all['下拉框的name'].value;
var status = document.all['status'].value;
//下拉点击事件
form.on('select(onClickSelected)',data=>{
//点击后想实现的功能或者效果,比如说选中开始的时候,禁用某个标签,xxx是标签id
if (status === 'start'){
$("#xxx").attr("disabled","disabled");
}
});
});
注意点
1).注意1中的lay-filter="onClickSelected",通过lay-filter添加事件,事件名称为onClickSelected
2).注意2中的事件名称和1中的select(onClickSelected)对应
2.主要是js中的事件
- form.on('select(test)', data => {...});
form.on('select(onClickSelected)', function (data) {
var value= data.value;//得到选中的值
var text = $(this)[0].innerText;//得到选中的文本内容
});
- form.on('select(test)', function (data) {...});
form.on('select(onClickSelected)', data => {
var value= data.value;//得到选中的值
var text = $('#test').find("option:selected")[0].innerText;//得到选中的文本内容
var text = data.elem[data.elem.selectedIndex].text;//得到选中的文本内容
});