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

jQuery在html有效,在jsp无效的原因的更多相关文章

  1. jQuery validate插件,自动验证无效的原因及解决方法归纳

    最近在使用validate插件进行验证的时候,出现有的控件在个别事件(比如keydown.foucs.onchange等)下不能自动验证,而有的控件却又正常,当时觉得很诡异,后来仔细测试查看,归纳原因 ...

  2. jquery ajax在 IE8/IE9 中无效

    你们是不是也曾经和我以为遇到过这样的情况呢,jquery ajax在 IE8/IE9 中无效获取不到数据呢,经过熬夜找到好的东西和你们分享一下就是jQuery-ajaxTransport-XDomai ...

  3. 关于mouse_event和sendinput无效的原因

    关于mouse_event和sendinput无效的原因 SetCursorPos 有用,   于mouse_event和sendinput 无用, 导致问题不清晰,  原来是我换了杀毒软件, 360 ...

  4. 配置python+mod_wsgi+apache 时 在浏览器中访问服务器时报错:Invalid HTTP_HOST header: 'XXXXX'. You may need to add u'XXXXX' to ALLOWED_HOSTS,在setting.py中添加‘*”无效的原因

    配置python+mod_wsgi+apache 时 在浏览器中访问服务器时报错:Invalid HTTP_HOST header: 'XXXXX'. You may need to add u'XX ...

  5. Mybatis order by语句使用<Choose><When>动态拼装无效的原因及解决方法

    在使用 <choose> <when test=""> </when> <otherwise> </otherwise> ...

  6. IE8中jQuery.load()加载页面不显示的原因

    一.jQuery.load() jQuery.load(url,[data],[callback])通过Ajax异步请求加载服务器中的数据,并把数据放到指定元素中. url :请求服务器的地址 dat ...

  7. 使用 ADOX 将 Table 添加到 Catalog 时报“类型无效”的原因和解决方法

    http://blog.csdn.net/kfhzy/article/details/6020283 http://blog.csdn.net/kfhzy/article/details/602054 ...

  8. android studio2.3.3 模拟器 Jni函数调用C++对象,lldb调试this指针和相关变量显示无效的原因

    android studio2.3.3 的版本中 Jni函数调用C++对象,对象调用相关的成员函数, lldb调试,变量跟踪窗口,this指针和相关变量显示无效的原因,但这些参数实际是有效的,只是de ...

  9. jquery Ajax 不执行回调函数success的原因

    jquery Ajax 不执行回调函数success的原因: $.ajax({ type: "post", contentType: "application/json& ...

随机推荐

  1. jQuery地图热点效应-后在弹出的提示鼠标层信息

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. Python 新浪微博中提取最常见转载的微博转载了几次,username,内容

    CODE: #!/usr/bin/python # -*- coding: utf-8 -*- ''' Created on 2014-7-4 @author: guaguastd @name: fi ...

  3. 基于Haar特征Adaboost人脸检测级联分类

    基于Haar特征Adaboost人脸检测级联分类 基于Haar特征Adaboost人脸检测级联分类,称haar分类器. 通过这个算法的名字,我们能够看到这个算法事实上包括了几个关键点:Haar特征.A ...

  4. 基于STM32旋转编码器

    ..\..\SYSTEM\usart\usart.c(1): error:  #5: cannot open source input file "sys.h": No such ...

  5. Jquery学习(三)选择

    1.Jquery最重要的是选择. 学习要点:        1.简单选择器        2.进阶选择器        3.高级选择器 ①简单选择器. 最简单的也就是最经常使用的,最经常使用的一般也是 ...

  6. Cocos2d-x学习笔记(两)Cocos2d-x总体框架

    原创文章.转载请注明出处:http://blog.csdn.net/sfh366958228/article/details/38680123 前言 上一节我们简单分析了HelloWorldproje ...

  7. 2014鞍山直播比赛H称号HDU5077(DFS修剪+通过计)

    NAND Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) Total Sub ...

  8. [Java] 一、对象的创建 & 销毁

    *1.考虑静态工厂方法(static factory method)代替构造器?!优势?不足? 服务提供者架构: 1.服务接口(Service Interface) -- 提供者实现的: 2.提供者注 ...

  9. Tomcat剖析(一):一个简单的Web服务器

    Tomcat剖析(一):一个简单的Web服务器 1. Tomcat剖析(一):一个简单的Web服务器 2. Tomcat剖析(二):一个简单的Servlet服务器 3. Tomcat剖析(三):连接器 ...

  10. linux Packet socket (1)简单介绍

    本文主要来自于linux自带的man packet手冊: http://man7.org/linux/man-pages/man7/packet.7.html 平时常常使用的INET套接字提供的是7层 ...