layui問題之模擬select點選事件
阿新 • • 發佈:2019-01-25
一、問題
不操作頁面,實現模擬select的事件,即,自動出現下拉框,自動點選下拉框的值,select文字框的值隨之改變
二、經過
剛開始檢視layui官方文件,發現僅僅只是有select監聽事件,即:
form.on('select(filter)', function(data){
console.log(data.elem); //得到select原始DOM物件
console.log(data.value); //得到被選中的值
});
但是,這個事件需要操作頁面,不可取。
三、結果
檢視layui原始碼,關於select事件的實現,在form.js中,看實現的原理。自動觸發select點選原理就是: 1、找到當前select的下一個div.layui-select-title節點的子元素,即input或者i,實現點選事件。 2、上一步驟完了之後,出現下拉框,但是下拉框還沒有點選事件;需要再實現你想讓下拉框裡面的哪個值有點選事件。此時,需要通過select找到下拉框dl裡面的dd的具體的值,然後實現點選事件。 這樣就完整的實現了模擬select點選事件。 原始碼:
<!-- HTML -->
<select name="modules" lay-verify="required" lay-search="">
<option value="">直接選擇或搜尋選擇</option>
<option value="1">layer</option>
<option value="2">form</option>
<option value="3">layim</option>
</select>
// JS:
$('select[name="modules"]').next().find('.layui-select-title input').click();
$('select[name="modules"]').next().find('.layui-anim').children('dd[lay-value="20"]').click();
雖然實現了效果,實際上看不出來效果,加一個延遲就可以了:
// 優化後的js
$('select[name=" modules"]').next().find('.layui-select-title input').click();
// 延遲3s再實現自動點選下拉框事件
setTimeout(function () {
$('select[name="modules"]').next().find('.layui-anim').children('dd[lay-value="20"]').click();
},3000);