JQuery学习笔记13——下拉列表框的简单应用
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title>下拉列表框的简单移动</title>
6<script type="text/javascript" src="jquery-1.3.1.js"></script>
7<script type="text/javascript">
8
$(function(){
9
$("#add").click(function(){
10
$options = $("#select1 option:selected");//获取选中的选项
11 $("#select2").append($options);//追加给对方
12
})
13 $("#add_all").click(function(){
14 $options = $("#select1 option");//获取选中的选项
15 $("#select2").append($options);//追加给对方
16 })
17 $("#select1").dblclick(function(){//绑定双击事件
18 var $options = $("option:selected",this);//获取选中的选项
19 $options.appendTo("#select2");//追加给对方
20 })
21 $("#remove").click(function(){
22 $options = $("#select2 option:selected");//获取选中的选项
23 $("#select1").append($options);//追加给对方
24 })
25 $("#remove_all").click(function(){
26 $options = $("#select2 option");//获取选中的选项
27 $("#select1").append($options);//追加给对方
28 })
29 $("#select2").dblclick(function(){//绑定双击事件
30 var $options = $("option:selected",this);//获取选中的选项
31 $options.appendTo("#select1");//追加给对方
32 })
33
})
34</script>
35<style type="text/css">
36.center{ float:left; margin-right:15px;}
37.center div span{font-size:12px; display:block; background:#ccc; width:100px; cursor:pointer; margin-bottom:10px;}
38</style>
39</head>
40<body>
41<div class="center">
42 <select multiple id="select1" style="width:100px; height:160px;">
43 <option value="1">选项1</option>
44 <option value="2">选项2</option>
45 <option value="3">选项3</option>
46 <option value="4">选项4</option>
47 <option value="5">选项5</option>
48 <option value="6">选项6</option>
49 <option value="7">选项7</option>
50 <option value="8">选项8</option>
51 </select>
52 <div>
53 <span id="add">选中添加到右边>></span>
54 <span id="add_all">全部添加到右边>></span>
55 </div>
56</div>
57<div class="center">
58 <select multiple id="select2" style="width:100px; height:160px;">
59
60 </select>
61 <div>
62 <span id="remove">选中移除到左边>></span>
63 <span id="remove_all">全部移除到左边>></span>
64 </div>
65</div>
66</body>
67</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5
<title>下拉列表框的简单移动</title>6
<script type="text/javascript" src="jquery-1.3.1.js"></script>7
<script type="text/javascript">8
$(function(){
$(function()
9
$("#add").click(function(){
$(10
$options = $("#select1 option:selected");//获取选中的选项11
$("#select2").append($options);//追加给对方12
})13
$("#add_all").click(function(){14
$options = $("#select1 option");//获取选中的选项15
$("#select2").append($options);//追加给对方16
})17
$("#select1").dblclick(function(){//绑定双击事件18
var $options = $("option:selected",this);//获取选中的选项19
$options.appendTo("#select2");//追加给对方20
})21
$("#remove").click(function(){22
$options = $("#select2 option:selected");//获取选中的选项23
$("#select1").append($options);//追加给对方24
})25
$("#remove_all").click(function(){26
$options = $("#select2 option");//获取选中的选项27
$("#select1").append($options);//追加给对方28
})29
$("#select2").dblclick(function(){//绑定双击事件30
var $options = $("option:selected",this);//获取选中的选项31
$options.appendTo("#select1");//追加给对方32
})33
})34
</script>35
<style type="text/css">36
.center{ float:left; margin-right:15px;}37
.center div span{font-size:12px; display:block; background:#ccc; width:100px; cursor:pointer; margin-bottom:10px;}38
</style>39
</head>40
<body>41
<div class="center">42
<select multiple id="select1" style="width:100px; height:160px;">43
<option value="1">选项1</option>44
<option value="2">选项2</option>45
<option value="3">选项3</option>46
<option value="4">选项4</option>47
<option value="5">选项5</option>48
<option value="6">选项6</option>49
<option value="7">选项7</option>50
<option value="8">选项8</option>51
</select>52
<div>53
<span id="add">选中添加到右边>></span>54
<span id="add_all">全部添加到右边>></span>55
</div>56
</div>57
<div class="center">58
<select multiple id="select2" style="width:100px; height:160px;">59
60
</select>61
<div>62
<span id="remove">选中移除到左边>></span>63
<span id="remove_all">全部移除到左边>></span>64
</div>65
</div>66
</body>67
</html>