layui問題の模擬セレクトクリック事件の実例解説

一、問題
ページを操作しないで、アナログselectのイベントを実現します。つまり、自動的にドロップダウン枠が現れて、自動的にドロップダウン枠の値をクリックして、selectテキストボックスの値が変わります。
二、経過
ラユイの公式文書を確認したところ、ただselectの傍受イベントがあるだけであることが分かりました。

form.on('select(filter)', function(data){
 console.log(data.elem); //  select  DOM  
 console.log(data.value); //       
});

しかし、このイベントはページを操作する必要があります。
三、結果
layuiのソースコードを調べて、select事件の実現に関して、form.jsの中で、実現の原理を見ます。自動トリガセレクトクリックの原理は以下の通りです。
1、現在のselectの次のdiv.layui-select-titleノードのサブ要素、すなわちinputまたはiを見つけて、クリックイベントを実現します。
2、前のステップが終わったら、下のフレームが現れますが、下のフレームはまだイベントをクリックしていません。もっと実現したいですが、コンボボックスの中のどの値にクリックイベントがありますか？この場合は、ドロップダウン枠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);

以上のlayui問題の模擬セレクトクリック事件の実例解説は小編集が皆さんに提供したすべての内容です。参考にしていただければと思います。よろしくお願いします。