Layui下拉框多選功能實現，提升網頁用戶交互體驗

一、Layui下拉框多選功能簡介

Layui是一款經典的前端UI框架，擁有豐富的組件和插件。其中下拉框控制項是非常實用的，而多選功能則可以提供更加靈活的交互體驗。通過該功能，用戶可以同時選擇多個選項，極大提升了網頁的操作效率和友好度。下面詳細介紹Layui下拉框多選功能的實現方法。

二、引入Layui插件資源文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Layui下拉框多選功能實現</title>
    <!-- 引入Layui樣式文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/layui/2.5.6/css/layui.min.css">
  </head>
  <body>
    <!-- 引入Layui js文件 -->
    <script src="https://cdn.bootcss.com/layui/2.5.6/layui.min.js"></script>
  </body>
</html>

首先，在網頁中引入Layui插件資源文件，這是實現下拉框多選功能的基礎。

三、使用Layui下拉框控制項

在頁面中添加下拉框控制項，並使用Layui的form模塊進行渲染。

<!-- 下拉框控制項 -->
<div class="layui-form-item">
  <label class="layui-form-label">多選下拉框控制項</label>
  <div class="layui-input-block">
    <select name="multiselect" lay-verify="required" lay-search>
      <option value=""></option>
      <option value="1">選項1</option>
      <option value="2">選項2</option>
      <option value="3">選項3</option>
      <option value="4">選項4</option>
      <option value="5">選項5</option>
    </select>
  </div>
</div>

<!-- 使用Layui form模塊進行渲染 -->
<script>
layui.use('form', function(){
  var form = layui.form;
  form.render('select');  //渲染下拉框控制項
});
</script>

上述代碼中，name屬性為控制項的唯一標識符，lay-verify屬性用於對選項進行驗證，lay-search屬性用於啟用搜索功能，同時添加了六個選項供用戶選擇。

四、啟用多選功能

使用Layui的form模塊的select過濾器方法開啟多選功能。

<script>
layui.use('form', function(){
  var form = layui.form;
  form.render('select');  //渲染下拉框控制項
  form.on('select(multiselect)', function(data){
    console.log(data.value);  //輸出選中的值
  });
});
</script>

在上述代碼中，通過form.on()方法監聽select控制項，當用戶選擇了選項後，回調函數中的data參數則包含了用戶選中的值。可以根據此值進行後續的操作。

五、設置默認選中項

使用Layui的form模塊的val方法設置默認選中項。

<!-- 下拉框控制項 -->
<div class="layui-form-item">
  <label class="layui-form-label">多選下拉框控制項</label>
  <div class="layui-input-block">
    <select name="multiselect" lay-verify="required" lay-search multiple>
      <option value="1" selected>選項1</option>
      <option value="2">選項2</option>
      <option value="3" selected>選項3</option>
      <option value="4">選項4</option>
      <option value="5">選項5</option>
    </select>
  </div>
</div>

<!-- 使用Layui form模塊進行渲染並設置默認選中項 -->
<script>
layui.use('form', function(){
  var form = layui.form;
  form.render('select');  //渲染下拉框控制項
  form.val('select', ['1', '3']);  //設置默認選中項
  form.on('select(multiselect)', function(data){
    console.log(data.value);  //輸出選中的值
  });
});
</script>

在上述代碼中，multiple屬性用於啟用多選功能，添加了兩個默認選中的選項，同時在form.val()方法中指定了默認選中的選項值。

六、樣式定製

使用Layui的form模塊的自定義事件方法自定義多選框樣式。

<!-- 下拉框控制項 -->
<div class="layui-form-item">
  <label class="layui-form-label">多選下拉框控制項</label>
  <div class="layui-input-block">
    <select name="multiselect" lay-verify="required" lay-search multiple>
      <option value="1" selected>選項1</option>
      <option value="2">選項2</option>
      <option value="3" selected>選項3</option>
      <option value="4">選項4</option>
      <option value="5">選項5</option>
    </select>
  </div>
</div>

<!-- 使用Layui form模塊進行渲染並設置默認選中項 -->
<script>
layui.use('form', function(){
  var form = layui.form;
  form.render('select', {
    checkName: 'checked',
    onRendered: function() {
      $('div.layui-form-select').find('input.layui-unselect').addClass('layui-multiselect');
    }
  });  //渲染下拉框控制項
  form.val('select', ['1', '3']);  //設置默認選中項
  form.on('select(multiselect)', function(data){
    console.log(data.value);  //輸出選中的值
  });
});
</script>

<!-- 添加自定義樣式 -->
<style>
.layui-multiselect {
  border-color: #1E9FFF !important;
  background-color: #fff !important;
}
</style>

在上述代碼中，checkName屬性用於指定多選框input的name屬性，添加了一個自定義的Class「layui-multiselect」用於定義多選框的樣式，在回調函數onRendered中動態添加了該Class。

七、總述

通過上述的步驟，我們可以輕鬆實現Layui下拉框多選功能，提升網頁用戶交互體驗。同時，可以通過設置默認選中項和自定義多選框樣式讓下拉框控制項更加符合網頁的整體風格。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/295906.html