jQuery在html有效在jsp無(wú)效的原因及解決方法

更新時(shí)間：2013年08月02日 15:49:54 作者：

最近用jQuery來(lái)寫(xiě)下拉框的選項(xiàng)值的左右移動(dòng)，放到j(luò)sp里面就不能用了，經(jīng)過(guò)測(cè)試終于找到了解決方法在此與大家分享下

最近用jQuery來(lái)寫(xiě)下拉框的選項(xiàng)值的左右移動(dòng)，代碼如下：

 
<!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>無(wú)標(biāo)題文檔</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(){ 
//左側(cè)加到右側(cè) 
jQuery("#add").click(function(){$("#select1 option:selected").appendTo("#select2")}) 

//右側(cè)加到左邊 
jQuery("#remove").click(function(){$("#select2 option:selected").appendTo("#select1")}) 

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

//全部移動(dòng)左邊 
$("#remove_all").click(function(){$("#select2 option").appendTo("#select1")}) 

//雙擊加到右邊 
$("#select1").dblclick(function(){$("option:selected",this).appendTo("#select2")}) 
//雙擊移動(dòng)左邊 
$("#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">選項(xiàng)1</option> 
<option value="2">選項(xiàng)2</option> 
<option value="3">選項(xiàng)3</option> 
<option value="4">選項(xiàng)4</option> 
<option value="5">選項(xiàng)5</option> 
<option value="6">選項(xiàng)6</option> 
<option value="7">選項(xiàng)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">選項(xiàng)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> 

用這個(gè)文件瀏覽的時(shí)候是可以用的，但是放到j(luò)sp里面就不能用了。笨方法來(lái)解決，寫(xiě)個(gè)alert方法看看報(bào)什么錯(cuò)，發(fā)現(xiàn)了問(wèn)題所在：
jQuery的function前面的$與JSP頁(yè)面的JSTL的$沖突了，直接導(dǎo)致不認(rèn)識(shí)此對(duì)象方法。
解決辦法：
把jQuery代碼里面的$全改成jQuery就可以正常使用了！

您可能感興趣的文章: