最近用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. SQLServer-----SQLServer 2008 R2卸载

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGVrZXdhbmd6aQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  2. MySQL分页实现

    mysql> select pname from product; +--------+ | pname  | +--------+ | 产品1  | | 产品2  | | 产品三 | +--- ...

  3. validform.js使用方法

    表单验证之validform.js使用方法 一.validform有什么用? 网页上有大量的input需要你进行验证的时候,如果是弹窗的话,需要不停地判断,如果为空,弹窗.如果不是数字,弹窗. 所以要 ...

  4. 简单的工具LogUtil、Toast

    简单的工具LogUtil.Toast     能够用了 import android.content.Context; import android.util.Log; import android. ...

  5. Android开发之自己主动登录功能的实现

    在我们平时使用的手机应用都能够实现仅仅须要登陆一次账号后,第二次进入应用直接跳转到效果界面的效果,还有QQ的登陆框是怎样记忆我们的隐身登陆,保存账号选项的呢,这些都是通过使用SharedPrefere ...

  6. 我也来谈javascript高级编程之：javascript函数编译过程

    前言 题目有点大,其实也就是手痒...跟大家来扯一下javascript编译过程. 那么到底什么是“编译”呢 这个...本人文笔太差,我还是直接举例子吧. 相信玩过js童鞋应该都看过下面这样一个面试题 ...

  7. thymeleaf模板引擎shiro集成框架

    shiro权限框架.前端验证jsp设计.间tag它只能用于jsp系列模板引擎. 使用最近项目thymeleaf作为前端模板引擎,采用HTML档,未出台shiro的tag lib,假设你想利用这段时间s ...

  8. NEU 1440 The minimum square sum (平方剩余和欧拉准则)

    若p=2或p=4*k+1 则p能够表成两平方数的和的形式 (欧拉和费马已证明,而且有求的方法) 所以答案是p 若p=4*k+3 设a^2=n(mod p) (n!=0)  能够证明不存在b,b^2=p ...

  9. 心有多宽 路就有多宽-- BreezeMH源码公布

    非常多话想说,但不知道从何说起~ 去年暑假做自己的第一个外挂,然后是Breeze‘s魔兽系列工具,測试版.正式版,看着自己进大学时的梦想慢慢的变成现实,那种喜悦感无法言表,于是就想着让很多其它的在校大 ...

  10. Apache & WebDav 配置（一）

    (一)简单Apache服务器的搭建!用于文件de上传.下载.修改.删除! ---------- - Apache 1. 使用最广的 Web 服务器.支持各种脚本(PHP)的执行 2. Mac自带,只需 ...