標籤:style blog http java color io cti html
<!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=utf-8" /><title>無標題文檔</title><script type="text/javascript" src="jquery-1.11.0.js"></script><script type="text/javascript"> $(document).ready(function(){ $("#allToRight").click(function(){ $("#select1 option").appendTo("#select2"); }) $("#allToLeft").click(function(){ $("#select2 option").appendTo("#select1"); }) $("#selectedToRight").click(function(){ alert($("#select1 option:selected").size()); $("#select1 option:selected").appendTo("#select2"); }) $("#selectedToLeft").click(function(){ $("#select2 option:selected").appendTo("#select1"); }) })</script></head><body><!-- multiple設定是否可以多選 --><select multiple="true" style="height: 300px; width: 100px;float:left;" id="select1"> <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> <option value="9">選項9</option> <option value="10">選項10</option></select><div style="float:left;padding: 10px;"> <input type="button" value="-->" id="selectedToRight"/><br/> <input type="button" value="==>" id="allToRight"/><br/> <input type="button" value="<--" id="selectedToLeft"/><br/> <input type="button" value="<==" id="allToLeft"/></div><select multiple="true" style="height: 300px; width: 100px;float:left;" id="select2"></select></body></html>