jQuery下拉框的简单应用

先看看效果图：

大家肯定都见过类似效果的网页，怎么实现的呢,代码很简单：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style type="text/css">* { margin:0; padding:0; }div.centent {float:left;text-align: center;margin: 10px;}span {display:block;margin:2px 2px; padding:4px 10px;background:#898989; cursor:pointer; font-size:12px; color:white;}</style><！--引入jQuery --><script src="jquery-2.1.0.min.js" type="text/javascript"></script><script type="text/javascript">$（function（）{ //移到右边 $（"#add"）.click（function（） { //获取选中的选项，删除并追加给对方 $（"#select1 option:selected"）.appendTo（"#select2"）; }）; //移到左边 $（"#remove"）.click（function（） { $（"#select2 option:selected"）.appendTo（"#select1"）; }）; //全部移到右边 $（"#add_all"）.click（function（） { //获取全部的选项,删除并追加给对方 $（"#select1 option"）.appendTo（"#select2"）; }）; //全部移到左边 $（"#remove_all"）.click（function（） { $（"#select2 option"）.appendTo（"#select1"）; }）; //双击选项 $（"#select1"）.dblclick（function（）{ //绑定双击事件 //获取全部的选项,删除并追加给对方 $（"option:selected",this）.appendTo（"#select2"）; //追加给对方 }）; //双击选项 $（"#select2"）.dblclick（function（）{$（"option:selected",this）.appendTo（"#select1"）; }）;}）;</script></head><body> <div class="centent"> <select multiple="multiple" id="select1" style="width:100px;height:160px;"><option value="1">曹操</option><option value="2">曹昂</option><option value="3">曹丕</option><option value="4">曹彰</option><option value="5">曹植</option><option value="6">曹熊</option><option value="7">曹仁</option><option value="8">曹洪</option><option value="9">曹休</option><option value="10">曹真</option><option value="11">曹爽</option> </select> <div><span id="add" >选中添加到右边>></span><span id="add_all" >全部添加到右边>></span> </div> </div> <div class="centent"> <select multiple="multiple" id="select2" style="width: 100px;height:160px;"><option value="12">曹芳</option> </select> <div><span id="remove"><<选中删除到左边</span><span id="remove_all"><<全部删除到左边</span> </div> </div></body></html>

代码实现的功能：
1）、将选中的选项添加给对方
2）、将全部选项添加给对方
3）、双击某个选项将其添加给对方
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。