1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<html>
<head>
<base href= "<%=basePath%>" >
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv= "pragma" content= "no-cache" >
<meta http-equiv= "cache-control" content= "no-cache" >
<meta http-equiv= "expires" content= "0" >
<meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content= "This is my page" >
<!--
<link rel= "stylesheet" type= "text/css" href= "styles.css" >
-->
<script type= "text/javascript" src= "http://code.jquery.com/jquery-1.4.1.min.js" ></script>
</head>
<SCRIPT LANGUAGE= "JavaScript" >
<!--
$(document).ready( function () {
$( "#toRight" ).click( function (){
$( "#selectLeft option:selected" ).each( function (){
$( "#selectRight" ).append( "<option value=" + $( this ).val() + ">" + $( this ).html() + "</option>" );
$( this ).remove();
});
});
$( "#toLeft" ).click( function (){
$( "#selectRight option:selected" ).each( function (){
$( "#selectLeft" ).append( "<option value=" + $( this ).val() + ">" + $( this ).html() + "</option>" ); //这个方法是默认在后面添加
//$("#selectLeft option:first").before("<option value=" + $(this).val() + ">" + $(this).html() + "</option>"); //此种方法是在select前面加内容
//$("#selectLeft option[value=3]").before("<option value=" + $(this).val() + ">" + $(this).html() + "</option>"); //此种方法是在selectt指定某一行加内容
$( this ).remove();
});
});
});
//-->
</SCRIPT>
<BODY>
<table>
<tr>
<td>
<select size= '10' multiple id= "selectLeft" style= "width:200px" >
<option value= "0" >Jquery API</option>
<option value= "1" >JavaScript高级程序设计</option>
<option value= "2" >锋利的jQuery</option>
<option value= "3" >JavaScript 设计模式</option>
<option value= "4" >JavaScript+DOM高级程序设计</option>
<option value= "5" >PHP高级程序设计</option>
<option value= "6" >面向对象程序设计</option>
</select>
</td>
<td>
<input type= "button" value= " >> " id= "toRight" /><br /><br />
<input type= "button" value= " << " id= "toLeft" />
</td>
<td>
<select size= '10' multiple id= "selectRight" style= "width:200px" >
</select>
</td>
</tr>
</table>
</BODY>
</HTML>
|