DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jQuery在html有效在jsp無效的原因及解決方法
jQuery在html有效在jsp無效的原因及解決方法
編輯:JavaScript綜合知識     
最近用jQuery來寫下拉框的選項值的左右移動,放到jsp裡面就不能用了,經過測試終於找到了解決方法在此與大家分享下  

最近用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就可以正常使用了!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved