左右選擇按鈕
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>雙列表</title>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
</head>
<style>
/* CSS Document */
* { padding:0; margin:0;}
body { font-size:12px; padding:100px;}
select { width:100px; height:167px; padding:5px;}
.content { float:left; text-align:center; margin-right:10px;}
span { display:block; width:100px; background:#eee; cursor:pointer; border:1px solid #ccc; padding:5px 0; margin:5px 0;}
</style>
<body>
<div class="content">
<select multiple="multiple" 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>
</select>
<span id="add">選中右移>></span>
<span id="add_all">全部右移>></span>
</div>
<div class="content">
<select multiple="multiple" id="select2">
</select>
<span id="remove">選中左移>></span>
<span id="remove_all">全部左移>></span>
</div>
<script>
$("#add").click(function () {
$("#select1 option:selected").appendTo("#select2");
});
$("#add_all").click(function(){
$("#select1 option").appendTo("#select2");
});
$("#remove").click(function () {
$("#select2 option:selected").appendTo("#select1");
});
$("#remove_all").click(function(){
$("#select2 option").appendTo("#select1");
});
$("#select1").dblclick(function () {
$("#select1 option:selected").appendTo("#select2");
});
$("#select2").dblclick(function () {
$("#select2 option:selected").appendTo("#select1");
});
</script>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
N網下載mod方法: 20240614親測好使
https://www.bilibili.com/video/BV1k8411575T/?vd_source=d68ed178f151e80fea1e02efd205802c