js案例-2 左右select栏目内容互换

最新推荐文章于 2022-01-06 15:03:44 发布

心郎

最新推荐文章于 2022-01-06 15:03:44 发布

阅读量1.4k

点赞数

分类专栏：前端_js_案例

本文链接：https://blog.csdn.net/u011301203/article/details/52434443

版权

这个示例展示了如何使用JavaScript实现两个Select元素之间的选项互换。用户可以通过点击按钮将选中的选项从左侧Select移动到右侧，或者将右侧的选项移回左侧。同时，右侧的Select在接收选项时会进行排序。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        select {
            width: 150px;
            height: 200px;
            background-color: #7bff68;
        }
    </style>
</head>
<body>
	<select size="10" name="aaa" id="sel1" multiple="multiple">
	    <option value="0">1 吕布</option>
	    <option value="1">2 赵云</option>
	    <option value="2">3 关羽</option>
	    <option value="3">4 张飞</option>
	    <option value="4">5 许褚</option>
	    <option value="5">6 马超</option>
	</select>
	
	<input type="button" value="<<<"/>
	<input type="button" value="<