您的位置：首页 > Web前端 > JQuery

jQuery在html有效在jsp无效的原因及解决方法

2013-08-02 00:00 681 查看

最近用jQuery来写下拉框的选项值的左右移动，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</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(){ 
//左侧加到右侧 
jQuery("#add").click(function(){$("#select1 option:selected").appendTo("#select2")}) 

//右侧加到左边 
jQuery("#remove").click(function(){$("#select2 option:selected").appendTo("#select1")}) 

//全部加到右边 
jQuery("#add_all").click(function(){$("#select1 option").appendTo("#select2")}) 

//全部移动左边 
$("#remove_all").click(function(){$("#select2 option").appendTo("#select1")}) 

//双击加到右边 
$("#select1").dblclick(function(){$("option:selected",this).appendTo("#select2")}) 
//双击移动左边 
$("#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> 
</head> 

<body> 
<input type="text" value="aaaaa" /><br /> 

<div class="centent"> 
<select multiple="multiple" id="select1" style="width:100px;height:160px;"> 
<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> 
<div> 
<img id="add" src='../img/content/arrowRight_disabled.gif' width="24" height="24" border='0' style="cursor:pointer; vertical-align:middle;" /> 
<span id="add_all" >全部添加到右边>></span> </div> 
</div> 

<div class="centent"> 
<select multiple="multiple" id="select2" style="width: 100px;height:160px;"> 
<option value="8">选项8</option> 
</select> 
<div> 
<img id="remove" src='../img/content/arrowLeft_disabled.gif' height="22" border='0' 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就可以正常使用了！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航