有关select左右移动、上下移动、双击移动效果代码_select multiple鼠标拖动上下移动-优快云博客

本文链接：https://blog.youkuaiyun.com/helanye/article/details/4484978

本文提供了一个HTML示例代码，展示了如何使用JavaScript来实现下拉框选项的添加、删除及排序等功能。通过双向选择按钮，用户可以将选项从一个下拉框移动到另一个，并支持双击操作。此外，还提供了选项的上下移动及置顶置底功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Untitled Document</title> <mce:script type="text/javascript"></mce:script> </head> <body> <table> <tr> <td>Color Code </td> <td></td> <td>Sample Order </td> <td></td> </tr> <tr> <td> <select id="selectColor" multiple="multiple" style="width:200px;height:200px;"> <option value="Black">Black</option> <option value="Blue">Blue</option> <option value="DK-RS">DARK RINSE</option> <option value="DK-SW">DARK STONEWASH</option> <option value="Green">Green</option> <option value="MD-SL">MED SANDBLAST</option> <option value="MD-SW">MED STONEWASH</option> <option value="NA">Not applicable</option> <option value="Yellow">Yellow</option> <option value="Red">Red</option> </select> </td> <td> <table> <tr> <td><input type="button" id="btn1" value="-> " onclick="addItem(selectColor,selectSo)"/></td> </tr> <tr> <td><input type="button" id="btn2" value="->>" onclick="allAddItem(selectColor,selectSo)"/></td> </tr> <tr> <td><input type="button" id="btn3" value="<<-" onclick="allAddItem(selectSo,selectColor)"/></td> </tr> <tr> <td><input type="button" id="btn4" value="<- " onclick="addItem(selectSo,selectColor)"/></td> </tr> </table> </td> <td> <select id="selectSo" multiple="multiple" style="width:200px;height:200px;"> </select> </td> <td> <table> <tr> <td><input type="button" id="btn5" value="AA" onclick="moveToTop(selectSo)"/></td> </tr> <tr> <td><input type="button" id="btn6" value="A" onclick="moveUp(selectSo)"/></td> </tr> <tr> <td><input type="button" id="btn7" value="V" onclick="moveDown(selectSo)"/></td> </tr> <tr> </tr> <td><input type="button" id="btn8" value="VV" onclick="moveToBottom(selectSo)"/></td> </tr> </table> </td> </tr> </table> <mce:script type="text/javascript"></mce:script> </body> </html>