XML/HTML Code復制內(nèi)容到剪貼板

<div class="centent" style="width:200px; float:left; margin-right:20px;">

<select multiple="multiple" id="select1" style="width:150px; height:160px;">

<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>

</select>

<div>

<span id="add" style="display:block; width:140px; cursor:pointer;">選中添加到右邊>></span>

<span id="addAll" style="display:block; width:140px; cursor:pointer;">全部添加到右邊>></span>

</div></div>

<div class="centent" style="width:200px; float:left; margin-right:20px;">

<select multiple="multiple" id="select2" style="width:150px; height:160px;">

</select>

<div>

<span id="add1" style="display:block; width:140px; cursor:pointer;"><<選中刪除到左邊</span>

<span id="addAll1" style="display:block; width:170px; cursor:pointer;"><<全部選中刪除到左邊</span>

</div>

</div>

JavaScript Code復制內(nèi)容到剪貼板

<script type="text/javascript">

//下拉框多選的應用 9：57

$(function(){

//開始把左邊的添加到右邊

$("#add").click(function(){ //把選中的添加到右邊

$option = $("#select1 option:selected");

$option.appendTo("#select2");

})

$("#addAll").click(function(){ //全部添加到右邊

$option = $("#select1 option");

$option.appendTo("#select2");

})

$("#select1").dbclick(function(){ //雙擊添加到右邊

$option = $("#select1 option:selected",this);

$option.appendTo("#select2");

})

//開始右邊的添加到左邊

$("#add1").click(function(){ //把選中的添加到左邊

$option = $("#select2 option:selected");

$option.appendTo("#select1");

})

$("#addAll1").click(function(){ //全部添加到左邊

$option = $("#select2 option");

$option.appendTo("#select1");

})

$("#select2").dbclick(function(){ //雙擊添加到左邊

$option = $("option:selected",this);

$option.appendTo("#select1");

})

})

</script>

更多信息請查看IT技術專欄