要实现一个JS原生的双栏穿梭选择框,我们需要做如下的步骤:
步骤一:准备HTML结构
首先,我们需要创建一个HTML结构,包含两个选择框和一些操作按钮。示例如下:
<div class="transfer-container">
<div class="transfer-left">
<h2>待选择项目</h2>
<select multiple></select>
</div>
<div class="transfer-buttons">
<button>></button>
<button><</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>></button>
<button><</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>></button>
<button><</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技术站