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日

相关文章

  • easyui Draggable组件实现拖动效果

    来讲解一下 easyui Draggable 组件的使用攻略。 简介 Draggable 是 easyui 中的一个拖动组件,它可以给页面中的任意元素添加拖动功能,支持鼠标和触摸屏两种操作方式。使用 Draggable 组件可以很方便地实现一些拖动、排序、调整位置等功能。 基本用法 Draggable 组件的调用方式如下: <div id="…

    css 2023年6月10日
    00
  • css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

    请看下面的详细讲解。 CSS设置滚动条颜色与样式 设置滚动条颜色 要设置滚动条的颜色,我们需要使用伪元素::-webkit-scrollbar,再用background-color属性设置滚动条的背景颜色,用thumb伪元素来设置滚动条的滑块颜色。 /* 设置滚动条的背景颜色 */ ::-webkit-scrollbar { background-color…

    css 2023年6月9日
    00
  • 基于Vue3编写一个简单的播放器

    这里是基于Vue3编写一个简单的播放器的详细攻略: 1. 确定界面和组件结构 在开始编写代码之前,我们需要明确播放器的界面和组件结构。这里我们可以画出播放器的框架图,以确定所需要的组件和它们之间的关系。 2. 安装和配置Vue3 在开始编写代码之前,我们需要安装和配置Vue3。首先我们需要安装Vue3的依赖包: npm install vue@next vu…

    css 2023年6月10日
    00
  • CSS中的几个伪元素使用介绍

    下面是关于CSS中几个伪元素使用介绍的完整攻略。 什么是CSS伪元素? 伪元素是CSS中一种特殊的选择器,允许你对元素的某些区域进行样式化。伪元素通过在元素的选择器中添加特殊的关键字来定义,如:::before,::after,::first-line和::first-letter。 伪元素的使用方法 ::before 和 ::after ::before和…

    css 2023年6月10日
    00
  • js cavans实现静态滚动弹幕

    1. 简介 Cavans 是 HTML5 新增的元素,它可以让开发者在浏览器上绘制图形、动画等。本篇攻略讲解如何使用 Canvas 实现静态的滚动弹幕。 2. 准备工作 为了使用 Canvas 实现滚动弹幕,需要先在 HTML 中添加一个 Canvas 元素。以下是添加 Canvas 元素的示例代码: <canvas id="myCanvas…

    css 2023年6月11日
    00
  • 遗迹灰烬重生武器有哪些 武器、套装与特性收集攻略

    遗迹灰烬重生武器攻略 一、遗迹灰烬重生武器介绍 遗迹灰烬重生是《原神》中的一个重要活动,其中最重要的奖励之一就是遗迹灰烬重生武器。在这个活动中,你可以通过完成任务、挑战宝箱和购买商品等方式获得遗迹灰烬重生装备和材料。 二、遗迹灰烬重生武器种类 在遗迹灰烬重生活动中,一共有7种不同的武器可以获得,分别是: 狼的末路 天空之刃 邪神之死 龙脊长弓 狂沙裂斩 冰风…

    css 2023年6月10日
    00
  • 容易混淆使用位置的XHTML标签

    让我详细讲一下“容易混淆使用位置的XHTML标签”的攻略。 什么是“容易混淆使用位置的XHTML标签”? 在开发网页的过程中,我们经常需要使用XHTML标签来描述网页的结构与内容。但是有一些标签可能会被使用位置所影响,导致使用不当或者混淆,使用位置不对的标签可能会影响网页的语义性和可读性。 容易混淆使用位置的XHTML标签攻略 在使用XHTML标签的时候,需…

    css 2023年6月11日
    00
  • jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)

    jQuery实现带缩略图的焦点图片切换(自动播放/响应鼠标动作)攻略 1. 准备工作 在实现本攻略前,我们需要准备以下内容: 最新版的jQuery库,在编写代码时建议使用jQuery v3.x 版本; Html页面中,包含用于展示焦点图片切换的元素,例如id为carousel-container的元素用于显示切换的图片; Html页面中,包含用于展示缩略图的…

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