JS原生双栏穿梭选择框的实现示例

要实现一个JS原生的双栏穿梭选择框,我们需要做如下的步骤:

步骤一:准备HTML结构

首先,我们需要创建一个HTML结构,包含两个选择框和一些操作按钮。示例如下:

<div class="transfer-container">
  <div class="transfer-left">
    <h2>待选择项目</h2>
    <select multiple></select>
  </div>
  <div class="transfer-buttons">
    <button>&gt;</button>
    <button>&lt;</button>
  </div>
  <div class="transfer-right">
    <h2>已选择项目</h2>
    <select multiple></select>
  </div>
</div>

其中,.transfer-container是整个选择框的容器,.transfer-left.transfer-right分别是左侧和右侧的选择框容器,.transfer-buttons是操作按钮的容器,按钮可以控制选择框中选项的移动。

步骤二:填充选项

接下来,我们需要使用JavaScript动态地填充左侧的选择框。示例代码如下:

const leftSelect = document.querySelector('.transfer-left select');

const options = [
  { text: '选项一', value: '1' },
  { text: '选项二', value: '2' },
  { text: '选项三', value: '3' },
  { text: '选项四', value: '4' },
  { text: '选项五', value: '5' },
];

options.forEach(option => {
  const { text, value } = option;
  const optionElement = document.createElement('option');
  optionElement.text = text;
  optionElement.value = value;
  leftSelect.add(optionElement);
});

我们首先获取左侧选择框的DOM元素,然后定义一个包含选项内容的数组,最后使用forEach方法遍历数组中的每个选项,为左侧选择框创建对应的option元素,最终添加到左侧选择框中。

步骤三:实现选项移动

我们需要为“>”和“<”按钮添加事件处理函数,实现选项的移动。示例代码如下:

const buttons = document.querySelectorAll('.transfer-buttons button');
const leftSelect = document.querySelector('.transfer-left select');
const rightSelect = document.querySelector('.transfer-right select');

buttons[0].addEventListener('click', () => {
  const selectedOptions = Array.from(leftSelect.selectedOptions);
  selectedOptions.forEach(option => {
    const newOption = option.cloneNode(true);
    leftSelect.remove(option);
    rightSelect.add(newOption);
  });
});

buttons[1].addEventListener('click', () => {
  const selectedOptions = Array.from(rightSelect.selectedOptions);
  selectedOptions.forEach(option => {
    const newOption = option.cloneNode(true);
    rightSelect.remove(option);
    leftSelect.add(newOption);
  });
});

我们首先获取两个选择框的DOM元素,以及按钮的DOM元素。然后为按钮添加事件处理函数,分别处理“>”和“<”按钮的点击事件。

对于“>”按钮来说,我们首先获取左侧选择框中被选中的选项,然后对每个选项进行循环,创建一个新的option元素,并将其添加到右侧选择框中。最后,从左侧选择框中移除该选项。

对于“<”按钮来说,操作类似,“<”按钮的事件处理函数也是类似的。我们首先获取右侧选择框中被选中的选项,然后对每个选项进行循环,创建一个新的option元素,并将其添加到左侧选择框中。最后,从右侧选择框中移除该选项。

示例1

假设我们需要使用一个双栏选择框,用于选择多项技能,可以将选中的技能添加到右侧的选择框中,以便后续的操作。以下是示例代码:

HTML结构:

<div class="transfer-container">
  <div class="transfer-left">
    <h2>技能列表</h2>
    <select multiple></select>
  </div>
  <div class="transfer-buttons">
    <button>&gt;</button>
    <button>&lt;</button>
  </div>
  <div class="transfer-right">
    <h2>已选技能</h2>
    <select multiple></select>
  </div>
</div>

JavaScript代码:

const leftSelect = document.querySelector('.transfer-left select');
const rightSelect = document.querySelector('.transfer-right select');
const addButton = document.querySelector('.transfer-buttons button:nth-child(1)');
const removeButton = document.querySelector('.transfer-buttons button:nth-child(2)');

const skills = [
  { text: 'JavaScript', value: 'js' },
  { text: 'HTML', value: 'html' },
  { text: 'CSS', value: 'css' },
  { text: 'Vue.js', value: 'vue' },
  { text: 'React.js', value: 'react' },
];

skills.forEach(skill => {
  const { text, value } = skill;
  const optionElement = document.createElement('option');
  optionElement.text = text;
  optionElement.value = value;
  leftSelect.add(optionElement);
});

addButton.addEventListener('click', () => {
  const selectedOptions = Array.from(leftSelect.selectedOptions);
  selectedOptions.forEach(option => {
    const newOption = option.cloneNode(true);
    leftSelect.remove(option);
    rightSelect.add(newOption);
  });
});

removeButton.addEventListener('click', () => {
  const selectedOptions = Array.from(rightSelect.selectedOptions);
  selectedOptions.forEach(option => {
    const newOption = option.cloneNode(true);
    rightSelect.remove(option);
    leftSelect.add(newOption);
  });
});

以上代码会生成一个具有技能列表和“>”、“<”按钮的双栏选择框,用于选择多项技能。在点击“>”按钮后,选中的技能会被添加到右侧的选择框中;在点击“<”按钮后,会将选中的技能移回到左侧的选择框中。

示例2

假设我们需要使用一个双栏选择框,用于进行文章标签管理,可以将已有标签移动到右侧的选择框中,也可以添加新的标签。以下是示例代码:

HTML结构:

<div class="transfer-container">
  <div class="transfer-left">
    <h2>已有标签</h2>
    <select multiple></select>
  </div>
  <div class="transfer-buttons">
    <button>&gt;</button>
    <button>&lt;</button>
  </div>
  <div class="transfer-right">
    <h2>文章标签</h2>
    <div>
      <input type="text">
      <button>添加</button>
    </div>
    <select multiple></select>
  </div>
</div>

JavaScript代码:

const leftSelect = document.querySelector('.transfer-left select');
const rightSelect = document.querySelector('.transfer-right select');
const addButton = document.querySelector('.transfer-buttons button:nth-child(1)');
const removeButton = document.querySelector('.transfer-buttons button:nth-child(2)');
const addInput = document.querySelector('.transfer-right input');
const addTagButton = document.querySelector('.transfer-right button');

const tags = [
  { text: 'HTML', value: 'html' },
  { text: 'CSS', value: 'css' },
  { text: 'JavaScript', value: 'js' },
  { text: 'Vue.js', value: 'vue' },
  { text: 'React.js', value: 'react' },
];

tags.forEach(tag => {
  const { text, value } = tag;
  const optionElement = document.createElement('option');
  optionElement.text = text;
  optionElement.value = value;
  leftSelect.add(optionElement);
});

addButton.addEventListener('click', () => {
  const selectedOptions = Array.from(leftSelect.selectedOptions);
  selectedOptions.forEach(option => {
    const newOption = option.cloneNode(true);
    leftSelect.remove(option);
    rightSelect.add(newOption);
  });
});

removeButton.addEventListener('click', () => {
  const selectedOptions = Array.from(rightSelect.selectedOptions);
  selectedOptions.forEach(option => {
    const newOption = option.cloneNode(true);
    rightSelect.remove(option);
    leftSelect.add(newOption);
  });
});

addTagButton.addEventListener('click', () => {
  const tagName = addInput.value.trim();
  if (tagName) {
    const optionElement = document.createElement('option');
    optionElement.text = tagName;
    optionElement.value = tagName.toLowerCase().replace(/\s+/g, '-');
    rightSelect.add(optionElement);
    addInput.value = '';
  }
});

以上代码会生成一个具有文章标签列表和“>”、“<”按钮的双栏选择框,可以将标签添加到右侧的选择框中,或者移回到左侧的选择框中。同时还有一个输入框和一个“添加”按钮,可以用于添加新的标签。在点击“添加”按钮后,输入框中的文本会被添加到右侧的选择框中。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS原生双栏穿梭选择框的实现示例 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 浅析word-break work-wrap的区别

    在 CSS 中,word-break 和 word-wrap 属性都用于控制文本的换行方式。虽然这两个属性的作用类似,但它们之间存在一些区别。本文将提供一些关于 word-break 和 word-wrap 属性的浅析,包括它们的区别和使用示例。 word-break 和 word-wrap 的区别 word-break 和 word-wrap 属性都用于控…

    css 2023年5月18日
    00
  • CSS的SASS样式编程指南

    以下是CSS的SASS样式编程指南的完整攻略: 什么是SASS SASS(Syntactically Awesome Style Sheets)是一种基于CSS语言的CSS预处理器。通过SASS预处理器,我们可以使用一些像编程语言一样的特性(如变量、函数、嵌套、继承等),来创建更加可维护和精简的CSS代码。 如何使用SASS 使用SASS有两种方式:命令行工…

    css 2023年6月9日
    00
  • 轻松搞懂CSS浮动与清除浮动图文详解

    轻松搞懂CSS浮动与清除浮动图文详解 1. 什么是浮动 CSS中的浮动(float),顾名思义就是使元素在文档中根据左右方向的要求浮动。使用浮动可以实现多栏布局,图文混排等效果。 2. 如何设置浮动 使用CSS的float属性可以让元素进行浮动,具体语法如下: float: none | left | right; 其中none代表取消浮动,left代表向左…

    css 2023年6月9日
    00
  • CSS设置div背景图的实现代码

    下面是关于“CSS设置div背景图的实现代码”的详细攻略: 步骤一:选择背景图片并准备好 在设置div背景图的时候,首先需要选择一张合适的图片。一般来说,可以选择一张具有纹理或颜色的图片作为背景图,以便更好的突出div的内容。选好图片后,需要将其准备好,保证图片符合使用要求。图片准备好后,就可以开始设置div背景图了。 步骤二:使用background属性设…

    css 2023年6月9日
    00
  • CSS层叠样式表的层叠是什么意思(自我理解)

    当同一个HTML元素被多个CSS规则应用时,这些规则中一些CSS属性有可能发生冲突,此时就需要经过“层叠”的处理来确定最终的输出值。CSS层叠样式表中的“层叠”指的就是这个过程。 层叠的过程通常从上往下进行,如果两个同级的CSS规则具有相同的优先级,那么后面声明的规则将覆盖先前声明的规则。如果两个CSS规则的优先级不同,那么优先级高的规则将会覆盖优先级低的规…

    css 2023年6月9日
    00
  • 【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)

    【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)是一篇关于jQuery实用代码片段的攻略,其中包括了一些可以直接使用的代码片段,可供开发者在开发过程中直接使用,提高开发效率。以下是对该攻略的详细讲解: 一、筛选与搜索 1.1 筛选指定元素 $(“selector”).filter(expression); 使用该代码片段可以筛…

    css 2023年6月9日
    00
  • 全面解析Bootstrap图片轮播效果

    接下来我会详细讲解“全面解析Bootstrap图片轮播效果”的完整攻略。该攻略将涵盖以下内容: 简介和安装:Bootstrap图片轮播效果是一个常用的网站轮播图片的方式,本文将向您介绍该效果的基本知识和安装步骤。 基本结构:Bootstrap图片轮播效果的基本结构包含三个部分:轮播容器、轮播图片和轮播控制器,本文将对其进行详细介绍。 实现方法:有多种方法可以…

    css 2023年6月10日
    00
  • 常用的新闻列表代码(ul/li布局方式)

    常用的新闻列表代码采用的是ul/li布局方式,是一个非常通用的排版方式。以下是使用该方式的标准代码示例: <ul> <li>新闻一</li> <li>新闻二</li> <li>新闻三</li> </ul> 在上面的代码中,<ul>表示无序列表,<…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部