当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery在html有效在jsp无效的原因及解决方法

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

2018年09月14日  | 移动技术网IT编程  | 我要评论

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

. 代码如下:


<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://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;}

p.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 />

<p 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>
<p>
<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> </p>
</p>

<p class="centent">
<select multiple="multiple" id="select2" style="width: 100px;height:160px;">
<option value="8">选项8</option>
</select>
<p>
<img id="remove" src='../img/content/arrowleft_disabled.gif' height="22" border='0' style="cursor:pointer; vertical-align:middle;" />
<span id="remove_all"><<全部删除到左边</span>
</p>
</p>
<input name="sub" type="submit" onclick="len()" value="提交" />
</body>
</html>


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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网