jQuery在html有效在jsp無效的原因及解決方法

最近用jQuery來寫下拉框的選項值的左右移動放到jsp裡面就不能用了經過測試終於找到了解決方法在此與大家分享下

　　最近用jQuery來寫下拉框的選項值的左右移動代碼如下

復制代碼代碼如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>無標題文檔</title>
<script type="text/javascript" src="/js/jqueryjs"></script>
<script type="text/javascript">
$(function(){
$("input")hover(function(){
$(this)val("")
}
function(){
$(this)val(thisdefaultValue)
}
)
})

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 = documentgetElementById("select");
alert(sellength);
}

</script>
<style type="text/css">
*{ margin:; padding:;}
input{ color:#ccc;}

divcentent {
float:left;
textalign: center;
margin: px;
}
span {
display:block;
margin:px px;
padding:px px;
background:#;
cursor:pointer;
fontsize: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_disabledgif width="" height="" border= style="cursor:pointer; verticalalign: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_disabledgif height="" border= style="cursor:pointer; verticalalign: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就可以正常使用了！

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20494.html