下面是详细的“JavaScript实现左右下拉框动态增删”攻略：
准备工作
在开始实现之前，我们需要先准备好需要用到的 HTML 结构和 JavaScript 文件。具体代码如下：
HTML 结构：
<!-- 左右两边的下拉框容器 -->
<div class="selectBox">
<select multiple="multiple" class="allItems" size="15"></select>
<div class="btnBox">
<button class="addBtn">>></button>
<button class="delBtn"><<</button>
</div>
<select multiple="multiple" class="selectedItems" size="15"></select>
</div>
其中，.allItems 表示所有可选中的项目，.selectedItems 表示已被选中的项目，.addBtn 和 .delBtn 分别代表“增加”和“删除”按钮。
JavaScript 文件：
// 获取左右两个下拉框对象
var allList = document.querySelector(".allItems");
var selectedList = document.querySelector(".selectedItems");
// 绑定“增加”按钮点击事件
var addButton = document.querySelector(".addBtn");
addButton.onclick = function () {
// 获取所有选中的项目
var selectedOptions = allList.querySelectorAll("option:checked");
for (var i = 0; i < selectedOptions.length; i++) {
// 将选中的项目加入右侧下拉框
selectedList.appendChild(selectedOptions[i]);
}
};
// 绑定“删除”按钮点击事件
var delButton = document.querySelector(".delBtn");
delButton.onclick = function () {
// 获取所有选中的项目
var selectedOptions = selectedList.querySelectorAll("option:checked");
for (var i = 0; i < selectedOptions.length; i++) {
// 将选中的项目加入左侧下拉框
allList.appendChild(selectedOptions[i]);
}
};
在这段 JavaScript 代码中，我们首先获取了左右两个下拉框的对象，并绑定了“增加”和“删除”按钮的点击事件。其中，“增加”按钮的点击事件会将左侧的选中项加入右侧下拉框，“删除”按钮的点击事件会将右侧的选中项加入左侧下拉框。
示例说明
示例1：多个下拉框之间分别进行增删项操作
例如，我们有两个下拉框，分别为 “allBox1” 和 “selectedBox1”，以及 “allBox2” 和 “selectedBox2”。如果我们只需要在单个下拉框中进行操作，只需将类选择器 .allItems 和 .selectedItems 替换成相应下拉框的 ID 或类名即可。例如：
<!-- 第1个下拉框容器 -->
<div class="selectBox">
<select multiple="multiple" class="allItems1" size="15"></select>
<div class="btnBox">
<button class="addBtn1">>></button>
<button class="delBtn1"><<</button>
</div>
<select multiple="multiple" class="selectedItems1" size="15"></select>
</div>
<!-- 第2个下拉框容器 -->
<div class="selectBox">
<select multiple="multiple" class="allItems2" size="15"></select>
<div class="btnBox">
<button class="addBtn2">>></button>
<button class="delBtn2"><<</button>
</div>
<select multiple="multiple" class="selectedItems2" size="15"></select>
</div>
JavaScript 代码：
// 获取左右两个下拉框对象
var allList1 = document.querySelector(".allItems1");
var selectedList1 = document.querySelector(".selectedItems1");
var allList2 = document.querySelector(".allItems2");
var selectedList2 = document.querySelector(".selectedItems2");
// 绑定第1个“增加”按钮点击事件
var addButton1 = document.querySelector(".addBtn1");
addButton1.onclick = function () {
// 获取所有选中的项目
var selectedOptions = allList1.querySelectorAll("option:checked");
for (var i = 0; i < selectedOptions.length; i++) {
// 将选中的项目加入右侧下拉框
selectedList1.appendChild(selectedOptions[i]);
}
};
// 绑定第1个“删除”按钮点击事件
var delButton1 = document.querySelector(".delBtn1");
delButton1.onclick = function () {
// 获取所有选中的项目
var selectedOptions = selectedList1.querySelectorAll("option:checked");
for (var i = 0; i < selectedOptions.length; i++) {
// 将选中的项目加入左侧下拉框
allList1.appendChild(selectedOptions[i]);
}
};
// 绑定第2个“增加”按钮点击事件
var addButton2 = document.querySelector(".addBtn2");
addButton2.onclick = function () {
// 获取所有选中的项目
var selectedOptions = allList2.querySelectorAll("option:checked");
for (var i = 0; i < selectedOptions.length; i++) {
// 将选中的项目加入右侧下拉框
selectedList2.appendChild(selectedOptions[i]);
}
};
// 绑定第2个“删除”按钮点击事件
var delButton2 = document.querySelector(".delBtn2");
delButton2.onclick = function () {
// 获取所有选中的项目
var selectedOptions = selectedList2.querySelectorAll("option:checked");
for (var i = 0; i < selectedOptions.length; i++) {
// 将选中的项目加入左侧下拉框
allList2.appendChild(selectedOptions[i]);
}
};
以上代码中，我们分别绑定了不同下拉框的“增加”和“删除”按钮点击事件，并在点击事件中分别对应不同的“allList”和“selectedList”对象进行操作。
示例2：在已选中的下拉框中搜索并添加新项目
在上面这个示例中，我们只是简单地将所有选中的项移动到右侧下拉框。但如果我们想要在已选中的下拉框中进行搜索，并将搜索结果添加到右侧下拉框中，应该怎么做呢？下面我们就来看一下示例代码：
<!-- 左右两边的下拉框容器 -->
<div class="selectBox">
<select multiple="multiple" class="allItems" size="15"></select>
<div class="btnBox">
<button class="addBtn">>></button>
<button class="delBtn"><<</button>
</div>
<select multiple="multiple" class="selectedItems" size="15"></select>
</div>
<!-- 搜索框 -->
<input type="text" class="searchBox" />
<!-- 数据数组 -->
<script>
var data = [
{"name": "苹果", "value": 1},
{"name": "橘子", "value": 2},
{"name": "香蕉", "value": 3},
{"name": "西瓜", "value": 4},
{"name": "葡萄", "value": 5},
{"name": "梨子", "value": 6}
];
</script>
在这段代码中，我们增加了一个搜索框和一个数据数组。搜索框用于输入需要搜索的项名称，数据数组包含了所有可添加的选项信息。
接下来，我们来实现 JavaScript 代码：
// 搜索框对象
var searchBox = document.querySelector(".searchBox");
// 左侧下拉框对象
var allList = document.querySelector(".allItems");
// 右侧下拉框对象
var selectedList = document.querySelector(".selectedItems");
// 绑定“搜索”按钮点击事件
var searchButton = document.querySelector(".searchBtn");
searchButton.onclick = function () {
// 获取待搜索的值
var keyword = searchBox.value.toLowerCase();
// 遍历数据数组
for (var i = 0; i < data.length; i++) {
// 判断搜索结果
if (data[i].name.toLowerCase().includes(keyword)) {
// 判断结果是否已存在右侧下拉框中
if (!selectedList.querySelector("option[value='" + data[i].value + "']")) {
// 插入右侧下拉框
var option = new Option(data[i].name, data[i].value);
selectedList.add(option);
}
}
}
};
// 绑定“增加”按钮点击事件
var addButton = document.querySelector(".addBtn");
addButton.onclick = function () {
// 获取所有选中的项目
var selectedOptions = allList.querySelectorAll("option:checked");
for (var i = 0; i < selectedOptions.length; i++) {
// 将选中的项目加入右侧下拉框
selectedList.appendChild(selectedOptions[i]);
}
};
// 绑定“删除”按钮点击事件
var delButton = document.querySelector(".delBtn");
delButton.onclick = function () {
// 获取所有选中的项目
var selectedOptions = selectedList.querySelectorAll("option:checked");
for (var i = 0; i < selectedOptions.length; i++) {
// 将选中的项目加入左侧下拉框
allList.appendChild(selectedOptions[i]);
}
};
该 JavaScript 代码中，我们增加了一个“搜索”按钮点击事件，用于对数据数组中的项进行搜索并添加到右侧下拉框中。另外，“增加”和“删除”按钮的操作方式和示例1相同。
在这个示例中，我们在已选中的下拉框中进行了搜索，并将结果加入到右侧下拉框中。这个功能对于需要手工添加大量选项的情况，可以提高效率，同时也可以预防漏填选项的情况。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现左右下拉框动态增删示例 - Python技术站
微信扫一扫 
支付宝扫一扫 