最近用jQuery来写下拉框的选项值的左右移动
放到jsp里面就不能用了
经过测试终于找到了解决方法在此与大家分享下
最近用jQuery来写下拉框的选项值的左右移动代码如下
复制代码 代码如下:
<!DOCTYPE html PUBLIC "
//W
C//DTD XHTML
Transitional//EN" "
<html xmlns="
<head>
<meta http
equiv="Content
Type" content="text/html; charset=utf
" />
<title>无标题文档</title>
<script type="text/javascript" src="
/js/jquery
js"></script>
<script type="text/javascript">
$(function(){
$("input")
hover(function(){
$(this)
val("")
}
function(){
$(this)
val(this
defaultValue)
}
)
})
jQuery(function(){
//左侧加到右侧
jQuery("#add")
click(function(){$("#select
option:selected")
appendTo("#select
")})
//右侧加到左边
jQuery("#remove")
click(function(){$("#select
option:selected")
appendTo("#select
")})
//全部加到右边
jQuery("#add_all")
click(function(){$("#select
option")
appendTo("#select
")})
//全部移动左边
$("#remove_all")
click(function(){$("#select
option")
appendTo("#select
")})
//双击加到右边
$("#select
")
dblclick(function(){$("option:selected"
this)
appendTo("#select
")})
//双击移动左边
$("#select
")
dblclick(function(){$("option:selected"
this)
appendTo("#select
")})
})
function len(){
var sel = document
getElementById("select
");
alert(sel
length);
}
</script>
<style type="text/css">
*{ margin:
; padding:
;}
input{ color:#ccc;}
div
centent {
float:left;
text
align: center;
margin:
px;
}
span {
display:block;
margin:
px
px;
padding:
px
px;
background:#
;
cursor:pointer;
font
size:
px;
color:white;
}
</style>
</head>
<body>
<input type="text" value="aaaaa" /><br />
<div class="centent">
<select multiple="multiple" id="select
" style="width:
px;height:
px;">
<option value="
">选项
</option>
<option value="
">选项
</option>
<option value="
">选项
</option>
<option value="
">选项
</option>
<option value="
">选项
</option>
<option value="
">选项
</option>
<option value="
">选项
</option>
</select>
<div>
<img id="add" src=
/img/content/arrowRight_disabled
gif
width="
" height="
" border=
style="cursor:pointer; vertical
align:middle;" />
<span id="add_all" >全部添加到右边>></span> </div>
</div>
<div class="centent">
<select multiple="multiple" id="select
" style="width:
px;height:
px;">
<option value="
">选项
</option>
</select>
<div>
<img id="remove" src=
/img/content/arrowLeft_disabled
gif
height="
" border=
style="cursor:pointer; vertical
align:middle;" />
<span id="remove_all"><<全部删除到左边</span>
</div>
</div>
<input name="sub" type="submit" onClick="len()" value="提交" />
</body>
</html>
用这个文件浏览的时候是可以用的但是放到jsp里面就不能用了笨方法来解决写个alert方法看看报什么错发现了问题所在
jQuery的function前面的$与JSP页面的JSTL的$沖突了直接导致不认识此对象方法
解决办法
把jQuery代码里面的$全改成jQuery就可以正常使用了！
