JavaScript实现左右下拉框动态增删示例

下面是详细的“JavaScript实现左右下拉框动态增删”攻略：

准备工作

在开始实现之前，我们需要先准备好需要用到的 HTML 结构和 JavaScript 文件。具体代码如下：

HTML 结构：

<!-- 左右两边的下拉框容器 -->
<div class="selectBox">
    <select multiple="multiple" class="allItems" size="15"></select>
    <div class="btnBox">
        <button class="addBtn">&gt;&gt;</button>
        <button class="delBtn">&lt;&lt;</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">&gt;&gt;</button>
        <button class="delBtn1">&lt;&lt;</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">&gt;&gt;</button>
        <button class="delBtn2">&lt;&lt;</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">&gt;&gt;</button>
        <button class="delBtn">&lt;&lt;</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技术站

JavaScript实现左右下拉框动态增删示例

准备工作

示例说明

示例1：多个下拉框之间分别进行增删项操作

示例2：在已选中的下拉框中搜索并添加新项目

相关文章