jQuery在html有效在jsp无效的原因及解决方法_jquery_脚本之家

最近用jQuery来写下拉框的选项值的左右移动,代码如下: 复制代码 代码如下:

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

无标题文档

复制代码 代码如下:

选项1 选项2 选项3 选项4 选项5 选项6 选项7

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<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)
}
)
})

图片 1
全部添加到右边>>

jQuery(function(){
//左侧加到右侧
jQuery(“#add”).click(function(){$(“#select1
option:selected”).appendTo(“#select2”)})

选项8

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

图片 2 <

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

用这个文件浏览的时候是可以用的,但是放到jsp里面就不能用了。笨方法来解决,写个alert方法看看报什么错,发现了问题所在:
jQuery的function前面的$与JSP页面的JSTL的$冲突了,直接导致不认识此对象方法。
解决办法: 把jQuery代码里面的$全改成jQuery就可以正常使用了!

//全部移动左边
$(“#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就可以正常使用了!

复制代码 代码如下: !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Transitional//EN” “…

发表评论

电子邮件地址不会被公开。 必填项已用*标注