layui-select插件如何在網頁中實現多級聯動選擇

一、什麼是多級聯動選擇

多級聯動選擇是一種互動式的選擇方式，它可以在一組關聯的選項中，根據前面選的不同的選項，來動態更新後面的選項列表。例如，選擇一個省份，然後根據所選省份，再選擇這個省份下的城市；再根據所選的城市，選擇這個城市下的縣區。

例如下圖所示:

二、為什麼要使用layui-select插件

layui-select插件是一款基於jQuery和Layui庫的下拉選擇插件，它支持多級聯動選擇和搜索選擇。這個插件容易上手，實現起來也非常方便。

除了多級聯動選擇，該插件還有以下幾大特點:

無需大量手動書寫標籤
無需載入大量數據
支持搜索選擇
支持非同步渲染

三、多級聯動選擇的實現步驟

下面我們將介紹如何使用layui-select插件實現多級聯動選擇。該插件提供了兩個關鍵屬性lay-filter和lay-verify來實現多級聯動選擇：

lay-filter屬性用於篩選出需要聯動的Select元素
lay-verify屬性用於驗證選擇的選項是否合法

四、多級聯動選擇示例代碼

代碼如下所示：

<div class="layui-form-item">
    <label class="layui-form-label">省份</label>
    <div class="layui-input-block">
        <select name="province" lay-filter="province">
            <option value="" selected="selected">請選擇省份</option>
            <option value="1">浙江省</option>
            <option value="2">廣東省</option>
            <option value="3">湖南省</option>
        </select>
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">城市</label>
    <div class="layui-input-block">
        <select name="city" lay-filter="city" disabled>
            <option value="" selected="selected">請選擇城市</option>
        </select>
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">縣區</label>
    <div class="layui-input-block">
        <select name="area" lay-filter="area" disabled>
            <option value="" selected="selected">請選擇縣區</option>
        </select>
    </div>
</div>

<script>
    layui.use('form', function(){
      var form = layui.form;

      //監聽省份下拉框選中事件
      form.on('select(province)', function(data){
        var value = data.value;
        if (value != '') {
          //啟用城市下拉框
          $('select[name="city"]').prop('disabled', false);
        } else {
          //禁用城市下拉框並清空選項
          $('select[name="city"]').prop('disabled', true).html('請選擇城市');
          //禁用縣區下拉框並清空選項
          $('select[name="area"]').prop('disabled', true).html('請選擇縣區');
        }
        //更新城市下拉框選項
        form.render('select');
      });

      //監聽城市下拉框選中事件
      form.on('select(city)', function(data){
        var value = data.value;
        if (value != '') {
          //啟用縣區下拉框
          $('select[name="area"]').prop('disabled', false);
        } else {
          //禁用縣區下拉框並清空選項
          $('select[name="area"]').prop('disabled', true).html('請選擇縣區');
        }
        //更新縣區下拉框選項
        form.render('select');
      });
    });
</script>

五、如何將該插件集成到你的項目中

要將該插件集成到你的項目中，你只需要按照以下步驟操作：

在html文件中引入Layui和jQuery庫
在head中引入layui-select的CSS文件: <link rel=”stylesheet” href=”/path/to/layui/css/layui.css”>
在body中引入layui-select的JS文件: <script src=”/path/to/layui/layui.js” charset=”utf-8″></script>
按照API文檔中的要求編寫Select元素
在JS中使用Layui的form模塊初始化Select元素

一個典型的項目文件目錄結構是這樣的:

|-- css/
|   |-- layui.css
|
|-- js/
|   |-- jquery.js
|   |-- layui.js
|
|-- layui-select/
|   |-- layui.select.js
|   |-- layui.select.css
|
|-- index.html
|-- other.html

在這個項目中，你可以這樣引入Layui和jQuery庫:

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>多級聯動選擇測試頁面</title>
    <link rel="stylesheet" href="/path/to/layui/css/layui.css">
  </head>
  <body>
    <div class="layui-form-item">
        <label class="layui-form-label">省份</label>
        <div class="layui-input-block">
            <select name="province" lay-filter="province">
                <option value="" selected="selected">請選擇省份</option>
                <option value="1">浙江省</option>
                <option value="2">廣東省</option>
                <option value="3">湖南省</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-block">
            <select name="city" lay-filter="city" disabled>
                <option value="" selected="selected">請選擇城市</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">縣區</label>
        <div class="layui-input-block">
            <select name="area" lay-filter="area" disabled>
                <option value="" selected="selected">請選擇縣區</option>
            </select>
        </div>
    </div>

    <script src="/path/to/jquery.js" charset="utf-8"></script>
    <script src="/path/to/layui/layui.js" charset="utf-8"></script>
    <script src="/path/to/layui-select/layui.select.js" charset="utf-8"></script>
    <script>
        layui.use('form', function(){
          var form = layui.form;

          //監聽省份下拉框選中事件
          form.on('select(province)', function(data){
            var value = data.value;
            if (value != '') {
              //啟用城市下拉框
              $('select[name="city"]').prop('disabled', false);
            } else {
              //禁用城市下拉框並清空選項
              $('select[name="city"]').prop('disabled', true).html('<option value="" selected="selected">請選擇城市</option>');
              //禁用縣區下拉框並清空選項
              $('select[name="area"]').prop('disabled', true).html('<option value="" selected="selected">請選擇縣區</option>');
            }
            //更新城市下拉框選項
            form.render('select');
          });

          //監聽城市下拉框選中事件
          form.on('select(city)', function(data){
            var value = data.value;
            if (value != '') {
              //啟用縣區下拉框
              $('select[name="area"]').prop('disabled', false);
            } else {
              //禁用縣區下拉框並清空選項
              $('select[name="area"]').prop('disabled', true).html('<option value="" selected="selected">請選擇縣區</option>');
            }
            //更新縣區下拉框選項
            form.render('select');
          });
        });
    </script>
  </body>
</html>

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