JS原生双栏穿梭选择框的实现示例-前端开发

要实现一个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 = '';
  }
});

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