左右下拉框是常见的用户界面组件，通常用于数据选择、排序等功能。本文将介绍如何使用JavaScript实现一个左右下拉框，并演示如何动态添加和删除选项。
HTML结构
首先，我们需要在HTML中创建两个select元素，分别表示左右两个下拉框。同时，我们还需要添加四个按钮，分别用于添加、删除左侧选项和添加、删除右侧选项。
------- ------------------------- ----- ------- -------------------------------- ------- ----------------------------------- ------- --------------------------------- ------- ------------------------------------ ------ ------- --------------------------
CSS样式
为了美化界面，我们可以添加一些CSS样式。这里我们使用Bootstrap提供的样式库，使界面更加美观。
----- ---------------- -----------------------------------------------------------------------------
JavaScript实现
初始化选项
接下来，我们需要使用JavaScript初始化左右两个下拉框的选项。这里我们使用一个数组来存储可选择的选项，并使用循环将其添加到左侧下拉框中。
--- ------- - ------- ------ ------ ------ ------- --- ---------- - -------------------------------------- --- ---- - - -- - - --------------- ---- - --- ------ - --------------------------------- ----------- - ----------- ----------------------- -
添加左侧选项
接下来，我们需要实现添加左侧选项的功能。当用户点击“添加左侧”按钮时，我们将从右侧下拉框中获取选中的选项，并将其添加到左侧下拉框中。
--- ------------- - -----------------------------------------
--------------------------------------- ---------- -
--- ----------- - ---------------------------------------
--- ---------- - --------------------------------------
--- ---- - - -- - - --------------------------- ---- -
-- --------------------------------- -
--- ------ - ---------------------------------
----------- - ----------------------------
-----------------------
----------------------
----
-
-
---删除左侧选项
类似地，我们可以实现删除左侧选项的功能。当用户点击“删除左侧”按钮时，我们将从左侧下拉框中获取选中的选项，并将其从左侧下拉框中移除。
--- ---------------- - --------------------------------------------
------------------------------------------ ---------- -
--- ---------- - --------------------------------------
--- ---- - - -- - - -------------------------- ---- -
-- -------------------------------- -
---------------------
----
-
-
---添加右侧选项
类似地，我们可以实现添加右侧选项的功能。当用户点击“添加右侧”按钮时，我们将从左侧下拉框中获取选中的选项，并将其添加到右侧下拉框中。
--- -------------- - ------------------------------------------
---------------------------------------- ---------- -
--- ----------- - ---------------------------------------
--- ---------- - --------------------------------------
--- ---- - - -- - - -------------------------- ---- -
-- -------------------------------- -
--- ------ - ---------------------------------
----------- - ---------------------------
------------------------
---------------------
----
-
-
---删除右侧选项
最后，我们可以实现删除右侧选项的
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/1358