本文實例講述了jQuery實現可移動選項的左右下拉列表。分享給大家供大家參考，具體如下：
運行效果圖如下：
完整代碼如下：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><style type="text/css"><!--BODY{ font-family:"Courier"; font-size: 12px; margin:0px auto; /*不顯示 橫縱向 滾動條*/ overflow-x:no; overflow-y:no; background-color: #B8D3F4;}td{ font-size:12px;}.default_input{ border:1px solid #666666; height:18px; font-size:12px;}.default_input2{ border:1px solid #666666; height:18px; font-size:12px;}.nowrite_input{ border:1px solid #849EB5; height:18px; font-size:12px; background-color:#EBEAE7; color: #9E9A9E;}.default_list{ font-size:12px; border:1px solid #849EB5;}.default_textarea{ font-size:12px; border:1px solid #849EB5;}.nowrite_textarea{ border:1px solid #849EB5; font-size:12px; background-color:#EBEAE7; color: #9E9A9E;}.wordtd5 { font-size: 12px; text-align: center; vertical-align:top; padding-top: 6px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; background-color: #b8c4f4;}.wordtd { font-size: 12px; text-align: left; vertical-align:top; padding-top: 6px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; background-color: #b8c4f4;}.wordtd_1 { font-size: 12px; vertical-align:top; padding-top: 6px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; background-color: #516CD6; color:#fff;}.wordtd_2{ font-size: 12px; text-align: right; vertical-align:top; padding-top: 6px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; background-color: #64BDF9;}.wordtd_3{ font-size: 12px; text-align: right; vertical-align:top; padding-top: 6px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; background-color: #F1DD34;}.inputtd{ font-size:12px; vertical-align:top; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px;}.inputtd2{ text-align: center; font-size:12px; vertical-align:top; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px;}.tablebg{ font-size:12px;}.tb{ border-collapse: collapse; border: 1px outset #999999; background-color: #FFFFFF;}.td2{line-height:22px; text-align:center; background-color:#F6F6F6;}.td3{background-color:#B8D3F4; text-align:center; line-height:20px;}.td4{background-color:#F6F6F6;line-height:20px;}.td5{border:#000000 solid; border-right-width:0px; border-left-width:0px; border-top-width:0px; border-bottom-width:1px;}.tb td{font-size: 12px;border: 2px groove #ffffff;}.noborder { border: none;}.button { /*ridge: 根據border-color的值畫菱形邊框 */ border: 1px ridge #ffffff; /*行間距 （上下）大小 */ line-height:18px; height: 20px; width: 45px; padding-top: 0px; background:#CBDAF7; color:#000000; font-size: 9pt; font-family:"Courier";}.textarea { font-family: Arial, Helvetica, sans-serif, "??"; font-size: 9pt; color: #000000; border-bottom-width: 1px; border-top-style: none; border-right-style: none; border-bottom-style: solid; border-left-style: none; border-bottom-color: #000000; background-color:transparent; text-align: left}--></style><script type="text/javascript" src="jquery-1.4.2.min.js"></script></head><body><div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;"><table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;"> <tr> <td width="126"> <!--multiple="multiple" 能同時選擇多個 size="10" 確定下拉選的長度--> <select name="first" size="10" multiple="multiple" class="td3" id="first"> <option value="選項1">選項1</option> <option value="選項2">選項2</option> <option value="選項3">選項3</option> <option value="選項4">選項4</option> <option value="選項5">選項5</option> <option value="選項6">選項6</option> <option value="選項7">選項7</option> <option value="選項8">選項8</option> </select> </td> <td width="69" valign="middle"> <input name="add" id="add" type="button" class="button" value="-->" /> <input name="add_all" id="add_all" type="button" class="button" value="==>" /> <input name="remove" id="remove" type="button" class="button" value="<--" /> <input name="remove_all" id="remove_all" type="button" class="button" value="<==" /> </td> <td width="127" align="left"> <select name="second" size="10" multiple="multiple" class="td3" id="second"> <option value="選項9">選項9</option> </select> </td> </tr></table></div></body><script type="text/javascript"> /**<input name="add" id="add" type="button" class="button" value="-->" /> */ /** * <select name="first" size="10" multiple="multiple" class="td3" id="first"> <option value="選項1">選項1</option> <option value="選項2">選項2</option> <option value="選項3">選項3</option> <option value="選項4">選項4</option> <option value="選項5">選項5</option> <option value="選項6">選項6</option> <option value="選項7">選項7</option> <option value="選項8">選項8</option> </select> */$().ready(function() { $("#add").click(function(){ $("#first option:selected").appendTo($("#second")); }); $("#add_all").click(function() { $("#first option").appendTo($("#second")); }); $("#first").dblclick(function(){ $("#first option:selected").appendTo($("#second")); }); $("#remove").click(function() { $("#second option:selected").appendTo($("#first")); }); $("#remove_all").click(function() { $("#second option").appendTo($("#first")); });});</script></html>更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jquery中Ajax用法總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
