jQuery在html有效,在jsp无效的原因

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

 

[html][/html] view plaincopy

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=”http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
  5. <title>无标题文档</title>
  6. <script type=”text/javascript” src=”../js/jquery-1.4.2.js”></script>
  7. <script type=”text/javascript”>
  8. $(function(){
  9.    $(“input”).hover(function(){
  10.     $(this).val(“”)
  11.    },
  12.    function(){
  13.     $(this).val(this.defaultValue)
  14.    }
  15.    )
  16. })
  17. jQuery(function(){
  18. //左侧加到右侧
  19.    jQuery(“#add”).click(function(){$(“#select1 option:selected”).appendTo(“#select2”)})
  20. //右侧加到左边
  21.    jQuery(“#remove”).click(function(){$(“#select2 option:selected”).appendTo(“#select1”)})
  22. //全部加到右边
  23.    jQuery(“#add_all”).click(function(){$(“#select1 option”).appendTo(“#select2”)})
  24. //全部移动左边
  25.    $(“#remove_all”).click(function(){$(“#select2 option”).appendTo(“#select1”)})
  26. //双击加到右边
  27.    $(“#select1”).dblclick(function(){$(“option:selected”,this).appendTo(“#select2”)})
  28. //双击移动左边
  29. $(“#select2”).dblclick(function(){$(“option:selected”,this).appendTo(“#select1”)})
  30. })
  31. function len(){
  32. var sel = document.getElementById(“select2”);
  33. alert(sel.length);
  34. }
  35. </script>
  36. <style type=”text/css”>
  37. *{ margin:0; padding:0;}
  38. input{ color:#ccc;}
  39. div.centent {
  40.    float:left;
  41.    text-align: center;
  42.    margin: 10px;
  43. }
  44. span {
  45. display:block;
  46. margin:2px 2px;
  47. padding:4px 10px;
  48. background:#898989;
  49. cursor:pointer;
  50. font-size:12px;
  51. color:white;
  52. }
  53. </style>
  54. </head>
  55. <body>
  56. <input type=”text” value=”aaaaa” /><br />
  57. <div class=”centent”>
  58.    <select multiple=”multiple” id=”select1″ style=”width:100px;height:160px;”>
  59.     <option value=”1″>选项1</option>
  60.     <option value=”2″>选项2</option>
  61.     <option value=”3″>选项3</option>
  62.     <option value=”4″>选项4</option>
  63.     <option value=”5″>选项5</option>
  64.     <option value=”6″>选项6</option>
  65.     <option value=”7″>选项7</option>
  66.    </select>
  67.    <div>
  68.     <img id=”add” src=’../img/content/arrowRight_disabled.gif’ width=”24″ height=”24″ border=’0′ style=”cursor:pointer; vertical-align:middle;” />
  69.     <span id=”add_all” >全部添加到右边>></span>   </div>
  70. </div>
  71. <div class=”centent”>
  72.    <select multiple=”multiple” id=”select2″ style=”width: 100px;height:160px;”>
  73.     <option value=”8″>选项8</option>
  74.    </select>
  75.    <div>
  76.     <img id=”remove” src=’../img/content/arrowLeft_disabled.gif’ height=”22″ border=’0′ style=”cursor:pointer; vertical-align:middle;” />
  77.     <span id=”remove_all”><<全部删除到左边</span>
  78.    </div>
  79. </div>
  80. <input name=”sub” type=”submit” onClick=”len()” value=”提交” />
  81. </body>
  82. </html>

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

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

解决办法:

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

标签