当前位置：首页 > 行业动态 > 正文

jq三级联动下拉列表

admin
行业动态
2024-03-22
2

jQuery三级联动是一种常见的网页交互效果，它可以实现在用户选择一级选项时，二级选项随之变化，当用户再选择二级选项时，三级选项也随之变化，这种效果在很多电商平台、分类信息网站等场景中都有广泛应用，本文将详细介绍如何使用jQuery实现三级联动。

1、准备工作

在使用jQuery实现三级联动之前，我们需要完成以下准备工作：

jq三级联动下拉列表

引入jQuery库：首先需要在HTML文件中引入jQuery库，可以通过以下方式引入：

Markup

<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>

准备HTML结构：需要准备三个层级的列表，分别为一级列表、二级列表和三级列表，每个列表中包含若干个选项。

jq三级联动下拉列表

Markup

<div class="levelone">
  <ul>
    <li dataid="1">选项1</li>
    <li dataid="2">选项2</li>
    <li dataid="3">选项3</li>
  </ul>
</div>
<div class="leveltwo">
  <ul>
    <li dataid="1" datapid="1">选项11</li>
    <li dataid="2" datapid="1">选项12</li>
    <li dataid="3" datapid="1">选项13</li>
  </ul>
</div>
<div class="levelthree">
  <ul>
    <li dataid="1" datapid="1" datalevel="3">选项111</li>
    <li dataid="2" datapid="1" datalevel="3">选项121</li>
    <li dataid="3" datapid="1" datalevel="3">选项131</li>
  </ul>
</div>

2、编写jQuery代码

接下来，我们需要编写jQuery代码来实现三级联动，我们需要监听一级列表的change事件，当用户选择某个一级选项时，根据该选项的dataid值更新二级列表的内容，我们需要监听二级列表的change事件，当用户选择某个二级选项时，根据该选项的dataid和datapid值更新三级列表的内容，具体代码如下：

jq三级联动下拉列表

JavaScript

$(function() {
  // 获取一级列表、二级列表和三级列表的元素
  var $levelOne = $('.levelone');
  var $levelTwo = $('.leveltwo');
  var $levelThree = $('.levelthree');
  // 获取一级列表的所有选项并添加到二级列表中作为默认选项
  $levelOne.find('li').each(function() {
    var $option = $(this);
    $option.clone().appendTo($levelTwo).attr('datapid', $option.attr('dataid'));
  });
  // 监听一级列表的change事件，更新二级列表的内容
  $levelOne.on('change', 'li', function() {
    var $selectedOption = $(this);
    var selectedId = $selectedOption.attr('dataid');
    $levelTwo.find('li[datapid!=' + selectedId + ']').remove(); // 移除与当前选中项无关的二级选项
    $selectedOption.siblings().each(function() { // 将选中项的兄弟节点添加到二级列表中作为默认选项
      var $siblingOption = $(this);
      $siblingOption.clone().appendTo($levelTwo).attr('datapid', $siblingOption.attr('dataid'));
    });
  });
  // 监听二级列表的change事件，更新三级列表的内容
  $levelTwo.on('change', 'li', function() {
    var $selectedOption = $(this);
    var selectedId = $selectedOption.attr('dataid');
    var selectedPid = $selectedOption.attr('datapid');
    $levelThree.find('li[datapid!=' + selectedPid + '][dataid!=' + selectedId + ']').remove(); // 移除与当前选中项无关的三级选项
    $selectedOption.siblings().each(function() { // 将选中项的兄弟节点添加到三级列表中作为默认选项
      var $siblingOption = $(this);
      $siblingOption.clone().appendTo($levelThree).attr('datapid', $siblingOption.attr('dataid')).attr('datalevel', '3');
    });
  });
});