jQuery在html有效在jsp无效的原因及解决方法_Javascript教程-查字典教程网
jQuery在html有效在jsp无效的原因及解决方法
jQuery在html有效在jsp无效的原因及解决方法
发布时间:2016-12-30 来源:查字典编辑
摘要:最近用jQuery来写下拉框的选项值的左右移动,代码如下:复制代码代码如下:无标题文档$(function(){$("input").hov...

最近用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>

<select multiple="multiple" id="select1">

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

<span id="add_all" >全部添加到右边>></span> </div>

</div>

<div>

<select multiple="multiple" id="select2">

<option value="8">选项8</option>

</select>

<div>

<img id="remove" src='../img/content/arrowLeft_disabled.gif' height="22" border='0' />

<span id="remove_all"><<全部删除到左边</span>

</div>

</div>

<input name="sub" type="submit" value="提交" />

</body>

</html>

用这个文件浏览的时候是可以用的,但是放到jsp里面就不能用了。笨方法来解决,写个alert方法看看报什么错,发现了问题所在:

jQuery的function前面的$与JSP页面的JSTL的$冲突了,直接导致不认识此对象方法。

解决办法:

把jQuery代码里面的$全改成jQuery就可以正常使用了!

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类