Recently using jquery to write down the option value of the Drop-down box to move around, the code is as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<script type= "Text/javascript" src= ". /js/jquery-1.4.2.js "></script>
<script type= "Text/javascript" >
$ (function () {
$ ("input"). Hover (function () {
$ (this). Val ("")
},
function () {
$ (this). Val (This.defaultvalue)
}
)
})
JQuery (function () {
Add left to right
JQuery ("#add"). Click (function () {$ ("#select1 option:selected"). Appendto ("#select2")})
Right add to left
JQuery ("#remove"). Click (function () {$ ("#select2 option:selected"). Appendto ("#select1")})
Add it all to the right.
JQuery ("#add_all"). Click (function () {$ ("#select1 option"). Appendto ("#select2")})
Move all the left.
$ ("#remove_all"). Click (function () {$ ("#select2 option"). Appendto ("#select1")})
Double-click Add to Right
$ ("#select1"). DblClick (function () {$ ("option:selected", this). Appendto ("#select2")})
Double-click to move left
$ ("#select2"). DblClick (function () {$ ("option:selected", this). Appendto ("#select1")})
})
function Len () {
var sel = document.getElementById ("Select2");
alert (sel.length);
}
</script>
<style type= "Text/css" >
*{margin:0; padding:0;}
input{color: #ccc;}
div.centent {
Float:left;
Text-align:center;
margin:10px;
}
span {
Display:block;
MARGIN:2PX 2px;
PADDING:4PX 10px;
Background: #898989;
Cursor:pointer;
font-size:12px;
Color:white;
}
</style>
<body>
<input type= "text" value= "AAAAA"/><br/>
<div class= "Centent" >
<select multiple= "multiple" id= "Select1" style= "width:100px;height:160px"; >
<option value= "1" > Option 1</option>
<option value= "2" > Option 2</option>
<option value= "3" > Option 3</option>
<option value= "4" > Option 4</option>
<option value= "5" > Option 5</option>
<option value= "6" > Option 6</option>
<option value= "7" > Option 7</option>
</select>
<div>
<span id= "Add_all" > All add to Right >></span> </div>
</div>
<div class= "Centent" >
<select multiple= "multiple" id= "Select2" style= "width:100px;height:160px"; >
<option value= "8" > Option 8</option>
</select>
<div>
<span id= "Remove_all" ><< all deleted to left </span>
</div>
</div>
<input name= "Sub" type= "Submit" onclick= "Len ()" value= "Submit"/>
</body>
Use this file to browse the time is available, but put it in the JSP can not be used. Stupid method to solve, write an alert method to read the newspaper what is wrong, found the problem lies:
jquery's function in front of the $ conflict with the JSTL $ of the JSP page leads directly to the perception of this object method.
Solution:
Convert the $ in the jquery code into jquery to use it properly!
