How to use Layui to implement drop-down menu selection function

How to use Layui to implement the drop-down menu selection function

Layui is a classic and easy-to-use front-end UI framework that can quickly build a beautiful and concise web interface. This article will introduce how to use Layui to implement the drop-down menu selection function, and attach specific code examples to help you understand better.

First, we need to introduce the relevant files of Layui. Layui's css and js files can be introduced through the following CDN link:

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>

Next, we need to create a drop-down menu selection component. The code is as follows:

<div class="layui-inline">
  <div class="layui-input-inline">
    <select id="select" lay-filter="selectFilter" lay-search>
      <option value="">请选择</option>
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
      <!-- 更多选项... -->
    </select>
  </div>
</div>

In the above code, the select element is a drop-down menu selection box, the lay-filter attribute represents the name of the filter, The lay-search attribute indicates whether to enable the search function.

Next, we need to write the corresponding JavaScript code to implement the drop-down menu selection function. The code is as follows:

layui.use(['form'], function(){
  var form = layui.form;

  // 监听下拉菜单选择事件
  form.on('select(selectFilter)', function(data){
    console.log(data.elem); // 获取select原始DOM对象
    console.log(data.value); // 获取选择的值
    console.log(data.othis); // 获取当前对象
    // 根据选择的值做相应的业务处理...
  });
});

In the above code, we use the layui.use method to load the form module, and then filter by listening selectFilter Container to obtain the selected value and process the corresponding business logic.

Finally, we need to initialize the component to make it work properly. The code is as follows:

layui.use(['form'], function(){
  var form = layui.form;

  // 初始化组件
  form.render('select');
});

In the above code, we use the form.render('select') method to render the select component and make it work normally.

So far, we have completed the code writing to implement the drop-down menu selection function using Layui.

Summary:
This article introduces how to use Layui to implement the drop-down menu selection function, and gives specific code examples. Through the above steps, we can implement a beautiful and easy-to-use drop-down menu selection component. I hope this article can help everyone understand and use the Layui framework.

The above is the detailed content of How to use Layui to implement drop-down menu selection function. For more information, please follow other related articles on the PHP Chinese website!