您的当前位置：首页 JavaScript实现两个select下拉框选项左移右移的示例代码分享

JavaScript实现两个select下拉框选项左移右移的示例代码分享

来源：保捱科技网

这篇文章主要介绍了JavaScript实现两个select下拉框选项左移右移功能，js实现下拉框元素互相移动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

今天没事用js写了一个用两个select下拉框之间能互相移动元素的小程序，刚刚才开始学javascript还有很多优化的地方。

Javascript代码

上面是javascript代码，下面是html加css代码。

Html代码

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style type="text/css"> 
 .select_move { margin:0px auto; width:206px; height:140px; margin-top:300px;} 
 .select_move_1 { float:left;} 
 .select_move_2 { float:left;} 
 .select_move_3 { float:left;} 
</style> 
</head> 
 
<body> 
 <p class="select_move"> 
 
 <p class="select_move_1"> 
 <select name="first" size="10" id="first" multiple="multiple"> 
 <option value="宝马">宝马</option> 
 <option value="丰田">丰田</option> 
 <option value="奥迪">奥迪</option> 
 <option value="凯迪拉克">凯迪拉克</option> 
 <option value="现代">现代</option> 
 <option value="奔驰">奔驰</option> 
 <option value="法拉利">法拉利</option> 
 
 </select> 
 </p> 
 <p class="select_move_2"> 
 <input type="button" value="------>" onclick="moveRight()"/><br /> 
 <input type="button" value="===>" onclick="moveAll()" /><br /> 
 <input type="button" value="<------" onclick="moveLeft()"/><br /> 
 <input type="button" value="<===" onclick="moveAllLeft()"/> 
 </p> 
 <p class="select_move_3"> 
 <select size="10" id="secend" multiple="multiple"> 
 </select> 
 </p> 
 </p> 
 
</body> 
</html>