左右下拉框是常见的用户界面组件，通常用于数据选择、排序等功能。本文将介绍如何使用JavaScript实现一个左右下拉框，并演示如何动态添加和删除选项。
HTML结构
首先，我们需要在HTML中创建两个select元素，分别表示左右两个下拉框。同时，我们还需要添加四个按钮，分别用于添加、删除左侧选项和添加、删除右侧选项。
<select id="leftSelect"></select> <div> <button id="addLeftButton">添加左侧</button> <button id="removeLeftButton">删除左侧</button> <button id="addRightButton">添加右侧</button> <button id="removeRightButton">删除右侧</button> </div> <select id="rightSelect"></select>
CSS样式
为了美化界面，我们可以添加一些CSS样式。这里我们使用Bootstrap提供的样式库，使界面更加美观。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
JavaScript实现
初始化选项
接下来，我们需要使用JavaScript初始化左右两个下拉框的选项。这里我们使用一个数组来存储可选择的选项，并使用循环将其添加到左侧下拉框中。
var options = ["选项1", "选项2", "选项3", "选项4", "选项5"];
var leftSelect = document.getElementById("leftSelect");
for (var i = 0; i < options.length; i++) {
var option = document.createElement("option");
option.text = options[i];
leftSelect.add(option);
}添加左侧选项
接下来，我们需要实现添加左侧选项的功能。当用户点击“添加左侧”按钮时，我们将从右侧下拉框中获取选中的选项，并将其添加到左侧下拉框中。
-- -------------------- ---- -------
--- ------------- - -----------------------------------------
--------------------------------------- ---------- -
--- ----------- - ---------------------------------------
--- ---------- - --------------------------------------
--- ---- - - -- - - --------------------------- ---- -
-- --------------------------------- -
--- ------ - ---------------------------------
----------- - ----------------------------
-----------------------
----------------------
----
-
-
---删除左侧选项
类似地，我们可以实现删除左侧选项的功能。当用户点击“删除左侧”按钮时，我们将从左侧下拉框中获取选中的选项，并将其从左侧下拉框中移除。
-- -------------------- ---- -------
--- ---------------- - --------------------------------------------
------------------------------------------ ---------- -
--- ---------- - --------------------------------------
--- ---- - - -- - - -------------------------- ---- -
-- -------------------------------- -
---------------------
----
-
-
---添加右侧选项
类似地，我们可以实现添加右侧选项的功能。当用户点击“添加右侧”按钮时，我们将从左侧下拉框中获取选中的选项，并将其添加到右侧下拉框中。
-- -------------------- ---- -------
--- -------------- - ------------------------------------------
---------------------------------------- ---------- -
--- ----------- - ---------------------------------------
--- ---------- - --------------------------------------
--- ---- - - -- - - -------------------------- ---- -
-- -------------------------------- -
--- ------ - ---------------------------------
----------- - ---------------------------
------------------------
---------------------
----
-
-
---删除右侧选项
最后，我们可以实现删除右侧选项的
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1358