效果如图:
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>无标题文档</title> 5 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 6 <style type="text/css"> 7 <!-- 8 BODY 9 { 10 font-family:"Courier"; 11 font-size: 12px; 12 margin:0px 0px 0px 0px; 13 overflow-x:no; 14 overflow-y:no; 15 background-color: #B8D3F4; 16 } 17 td 18 { 19 font-size:12px; 20 } 21 .default_input 22 { 23 border:1px solid #666666; 24 height:18px; 25 font-size:12px; 26 } 27 .default_input2 28 { 29 border:1px solid #666666; 30 height:18px; 31 font-size:12px; 32 } 33 .nowrite_input 34 { 35 border:1px solid #849EB5; 36 height:18px; 37 font-size:12px; 38 background-color:#EBEAE7; 39 color: #9E9A9E; 40 } 41 .default_list 42 { 43 font-size:12px; 44 border:1px solid #849EB5; 45 } 46 .default_textarea 47 { 48 font-size:12px; 49 border:1px solid #849EB5; 50 } 51 52 .nowrite_textarea 53 { 54 border:1px solid #849EB5; 55 font-size:12px; 56 background-color:#EBEAE7; 57 color: #9E9A9E; 58 } 59 60 .wordtd5 { 61 font-size: 12px; 62 text-align: center; 63 vertical-align:top; 64 padding-top: 6px; 65 padding-right: 5px; 66 padding-bottom: 3px; 67 padding-left: 5px; 68 background-color: #b8c4f4; 69 } 70 71 .wordtd { 72 font-size: 12px; 73 text-align: left; 74 vertical-align:top; 75 padding-top: 6px; 76 padding-right: 5px; 77 padding-bottom: 3px; 78 padding-left: 5px; 79 background-color: #b8c4f4; 80 } 81 .wordtd_1 { 82 font-size: 12px; 83 vertical-align:top; 84 padding-top: 6px; 85 padding-right: 5px; 86 padding-bottom: 3px; 87 padding-left: 5px; 88 background-color: #516CD6; 89 color:#fff; 90 } 91 .wordtd_2{ 92 font-size: 12px; 93 text-align: right; 94 vertical-align:top; 95 padding-top: 6px; 96 padding-right: 5px; 97 padding-bottom: 3px; 98 padding-left: 5px; 99 background-color: #64BDF9; 100 } 101 .wordtd_3{ 102 font-size: 12px; 103 text-align: right; 104 vertical-align:top; 105 padding-top: 6px; 106 padding-right: 5px; 107 padding-bottom: 3px; 108 padding-left: 5px; 109 background-color: #F1DD34; 110 } 111 .inputtd 112 { 113 font-size:12px; 114 vertical-align:top; 115 padding-top: 3px; 116 padding-right: 3px; 117 padding-bottom: 3px; 118 padding-left: 3px; 119 } 120 .inputtd2 121 { 122 text-align: center; 123 font-size:12px; 124 vertical-align:top; 125 padding-top: 3px; 126 padding-right: 3px; 127 padding-bottom: 3px; 128 padding-left: 3px; 129 } 130 .tablebg 131 { 132 font-size:12px; 133 } 134 135 .tb{ 136 border-collapse: collapse; 137 border: 1px outset #999999; 138 background-color: #FFFFFF; 139 } 140 .td2{line-height:22px; text-align:center; background-color:#F6F6F6;} 141 .td3{background-color:#B8D3F4; text-align:center; line-height:20px;} 142 .td4{background-color:#F6F6F6;line-height:20px;} 143 .td5{border:#000000 solid; 144 border-right-width:0px; 145 border-left-width:0px; 146 border-top-width:0px; 147 border-bottom-width:1px;} 148 149 .tb td{ 150 font-size: 12px; 151 border: 2px groove #ffffff; 152 } 153 154 155 156 157 .noborder { 158 border: none; 159 } 160 161 .button { 162 border: 1px ridge #ffffff; 163 line-height:18px; 164 height: 20px; 165 width: 45px; 166 padding-top: 0px; 167 background:#CBDAF7; 168 color:#000000; 169 font-size: 9pt; 170 font-family:"Courier"; 171 } 172 173 .textarea { 174 font-family: Arial, Helvetica, sans-serif, "??"; 175 font-size: 9pt; 176 color: #000000; 177 border-bottom-width: 1px; 178 border-top-style: none; 179 border-right-style: none; 180 border-bottom-style: solid; 181 border-left-style: none; 182 border-bottom-color: #000000; 183 background-color:transparent; 184 text-align: left 185 } 186 --> 187 </style></head> 188 189 <body> 190 191 <div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;"> 192 <table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;"> 193 <tr> 194 <td width="126"> 195 <!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度--> 196 <select name="first" multiple="multiple" size=10 class="td3" id="first"> 197 <option value="选项1">选项1</option> 198 <option value="选项2">选项2</option> 199 <option value="选项3">选项3</option> 200 <option value="选项4">选项4</option> 201 <option value="选项5">选项5</option> 202 <option value="选项6">选项6</option> 203 <option value="选项7">选项7</option> 204 <option value="选项8">选项8</option> 205 </select> 206 </td> 207 <td width="69" valign="middle"> 208 <input name="add" id="add" type="button" class="button" value="-->" /> 209 <input name="add_all" id="add_all" type="button" class="button" value="==>" /> 210 <input name="remove" id="remove" type="button" class="button" value="<--" /> 211 <input name="remove_all" id="remove_all" type="button" class="button" value="<==" /> 212 </td> 213 <td width="127" align="left"> 214 <select name="second" size="10" multiple="multiple" class="td3" id="second"> 215 <option value="选项9">选项9</option> 216 </select> 217 </td> 218 </tr> 219 </table> 220 </div> 221 </body> 222 <script type="text/javascript"> 223 //<input name="add" id="add" type="button" class="button" value="-->" /> 224 $("#add").click(function(){ 225 $("#first>option:selected").appendTo($("#second")); 226 }); 227 228 //<input name="add_all" id="add_all" type="button" class="button" value="==>" /> 229 $("#add_all").click(function(){ 230 $("#first>option").appendTo($("#second")); 231 }); 232 233 //<input name="remove" id="remove" type="button" class="button" value="<--" /> 234 $("#remove").click(function(){ 235 $("#second>option:selected").appendTo($("#first")); 236 }) 237 238 //<input name="remove_all" id="remove_all" type="button" class="button" value="<==" /> 239 $("#remove_all").click(function(){ 240 $("#second>option").appendTo($("#first")); 241 }); 242 243 $("#first").dblclick(function(){ 244 $("#first>option:selected").appendTo($("#second")); 245 }); 246 $("#second").dblclick(function(){ 247 $("#second>option:selected").appendTo($("#first")); 248 }); 249 250 251 </script> 252 </html>
本文转自SummerChill博客园博客，原文链接：http://www.cnblogs.com/DreamDrive/p/5780131.html，如需转载请自行联系原作者
