真邪门了，同样的js代码在html中运行好好的，到jsp中就狂报错

小弟不才，欲实现一个打开一个页面，上面有两个列表A，B，用户选择A中的项到B中去，完成后将B中选择的结果传回调用页面。列表A，B选择的js代码在HTML中是嗖嗖的跑，换个文件头同样内容考到JSP中一跑就哐哐报错，
提示alert('value='+document.form1.source.value);错误，找不到source对象
source.option[i]也找不到对象
...
请各位好汉出手相助！先谢了
全部jsp代码如下：<%@ page language="java" contentType="text/html; charset=UTF-8" %><html>
<head>
<% 
   String baseUrl = request.getContextPath();
%><script type="text/javascript">
var s = document.getElementById("source");
var d = document.getElementById("dest");
//var s_opts=document.all.source.options;
//var d_opts=document.all.dest.options;
function add(type){
alert('value='+document.form1.source.value);
alert('length='+document.form1.source.options.length);
var selLen=document.getElementById("source").options.length;

for(var i=0;i<selLen;i++)
{
if(s.options[i].selected == true )
{
d.options.add( new Option( s[i].text,s[i].value ) );
if( type == 1 ) break;
}
}
}function remove(type){
var selLen=document.getElementById("dest").options.length if( type==2 )
{
d_opts.length=0;
return;
}
for(var i=0;i<selLen;i++)
{
if( d_opts[i].selected == true )
{
d_opts.remove(i);
return;
}
}
}</script><script language="javascript"> 
function del() 
{
var selLen=document.getElementById("source").options.length; 
var sel=document.getElementById("source");
for(var i=0;i<selLen;i++) 
{ 
sel.options.remove(0); 
} 
} 
</script> 
<BODY>
<form id="form1" >
<table width="790" border="0" cellpadding="0" cellspacing="0">
  <tr valign="middle">
    <td height="15" colspan="7" align="left" valign="middle"><hr size="1" noshade></td>
  </tr>
  <tr align="center" valign="middle">
    <td height="20" colspan="2" align="right">&nbsp;</td>
    <td width="150" valign="middle">左select</td>
    <td width="85">&nbsp;</td>
    <td>右select</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr align="center" valign="middle">
    <td height="198" colspan="2" align="right"></td>
    <td align="center" valign="middle"><select name="source" id="source" size="16" >
        <option>aaaaaaaa</option>
        <option>bbbbbbbb</option>
        <option>cccccccc</option>
        <option>dddddddd</option>
        <option>eeeeeeee</option>
        <option>ffffffff</option>
        <option>gggggggg</option>
        <option>hhhhhhhh</option>
      </select>
    </td>
    <td valign="middle"><p class="button1">
        <input name="search23" type="button" class="input0" id="search232" value="添加多个" onclick="add(2)">
        <br/>
        <input name="search2" type="button" class="input0" id="search25" value="添加单个" onclick="add(1)">        
        <br/>
        <input name="search222" type="button" class="input0" id="search2223" value="删除单个" onclick="remove(1)">
        <br/>
        <input name="search22" type="button" class="input0" id="search224" value="全部删除" onclick="remove(2)">
        <input type="button" value="ddd" onclick="del();">
      </p>
      </td>
    <td align="center" valign="middle"><select name="dest" id="dest" size="16" >
      </select>
    </td>
    
  </tr></table>
  </from>
</BODY>

解决方案 »

  1.   

    <form name="form1">不是id
      

  2.   

    var s = document.getElementById("source"); 这句只能用div上
      

  3.   

    你可以去看看这个JSP对应的servlet。。
    PS: 在JS里不建议 把一个element的 name和id 设成一样 最好改下
      

  4.   

    我不想信你在html里面就好好的,纯属放屁
      

  5.   

    兄弟，一不小心就看到你最后一个标签错鸟！！！
    </from>看看是这个引起的吗？
      

  6.   

    还有，你form的没有取名，却弄一个id在那里，这个“document.form1.source.”不错吗？在加一个name=“form1”给分！
      

  7.   

    <option value='1'>aaaaaaaa</option>
            <option value='2'>bbbbbbbb</option>
            <option value='3'>cccccccc</option>
            <option>dddddddd</option>
            <option>eeeeeeee</option>
            <option>ffffffff</option>
            <option>gggggggg</option>option 不加value怎么能够得到source的值???   我加了三个,你看看
      

  8.   

    首先，非常感谢各位的帮助to maxinliangGenius(Geniues) ，请说话文明点，HTML中行不行自己去试to yoyo82(优游) ，谢了，name="form1" id="form1" 一样是可以的，name是名称可重复的，ID是在html上对象唯一的标志。to theforever(碧海情天) ,谢，上面的问题不是值，如果没有值得到的应该会是空或undifined，上面的错误是,得不到html中的对象leojay1(绯村剑心) 真的很搞笑吗？请给出你所知道的javascript访问html对象的所有方式方法
    该问题已经解决了，但是上面javascript不能得到html对象的原因还是不尚清楚，一定要有form吗,我试了几种方式，仍不得解再次感谢大家目前采用的代码如下<%@ page language="java" contentType="text/html; charset=UTF-8" %><html>
    <head>
    <% 
       String baseUrl = request.getContextPath();
    %>
    <title>选择项目</title>
    <link href="<%=baseUrl%>/global/css/layout.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="<%=baseUrl%>/global/js/openPopWin.js"></script>
    <script src="<%=baseUrl%>/global/css/imagebuttons_1.js" type=text/javascript></script>
    </head>
    <body class="bodyspace">
    <!--页面内容区域-->
    <form action="" method="post" name="form1" id="form1" >
    <table width="600px"  height="100%" border="0" align="left"  valign="top" cellpadding="0" cellspacing="0" >  <tr valign="top"  >
        <td > 
    <fieldset class="fieldset_first">
    <table width="100%"  height="100%" border="0" align="left"  valign="top" cellpadding="0" cellspacing="0" >
    <tr valign="top" >
    <td>
        <select   id=_srcList   size=8   ondblclick="moveOption(this,   this.form._selList)"   style="width:100">   
    <option   value="1">Item   1
    <option   value="2">Item   2
    <option   value="3">Item   3
    <option   value="4">Item   4
    <option   value="5">Item   5
    <option   value="6">Item   6
        </select>   
    </td>
    </tr>
    </table>
    </div>
    </td>
        <td  align="center" valign="middle">
       <div id="selectbuttongrouparea" >
    <img name="button61" height="16" width="16" alt="" src="../images/btn_sort_a.gif"  align="middle" border="0">
            <img name="button71" height="16" alt="" src="../images/btn_sort_d.gif" width="16" align="middle" border="0">
    <input type="button" property="submit" class="graybutton" value="  >  " style="margin: 20px 20px 10px 20px;">
    <input type="button" property="submit" class="graybutton" value=" >> " style="margin: 10px 20px 20px 20px;">
    <input type="button" property="submit" class="graybutton" value="  <  " style="margin: 25px 20px 10px 20px;">
    <input type="button" property="submit" class="graybutton" value=" << " onclick="removeSelect(this);" style="margin: 10px 20px 10px 20px;">
        </div>
    </td>
        <td  width="250px" >
    <div id="label"><ul><li class="sy4">已选择项目：</li></ul></div> 
    <div  align=left  class="small_tree_area" style="OVERFLOW-y: auto;overflow-x:hidden;width: 225px; height:255px; " >
    <table width="100%"  border="0" valign="top" cellpadding="0" cellspacing="0" >
          <tr valign="top"><td>
    <select   id=_selList   size=8   ondblclick="moveOption(this,   this.form._srcList)"   style="width:100">   
    </select>
    </td></tr>   
    </table>   </div>
    </td>
      </tr>
    </table>
    </fieldset>
    </td>
      </tr>
      <tr align="left">
        <td  align="center">
    <div id="buttongrouparea" >
    <input type="button" property="button" class="bluebutton" value="  确 定  " style="margin-right: 40px;" onClick='returnSel(this.form._selList)'>
    <input type="button" property="button" class="bluebutton" value="  1  " style="margin-right: 40px;" onClick='returnSel(this.form._selList)'>
    <input type="button" property="submit" class="graybutton" value="  取 消  " onClick='self.close()'>
        </div>
    </td>
      </tr>
    </table></form></DIV></body>
    </html>
     
      <script   language="JavaScript">
      function   moveOption(e1,   e2)
      {
    try
    {
    var   e   =   e1.options[e1.selectedIndex];
    //var   sel   =   document.all.select3.options[document.all.select3.selectedIndex].text;   
    var   text   =   e.text+",";
    e2.options.add(new   Option(text,e.value));
    getValue();
    }
    catch(e)
    {
    }
      }     function   removeSelect(e1)
      {
          try
      {
    e1.options.remove(e1.selectedIndex);
    getValue();   
      }
          catch(e)
          {
          }   
      }
        
      function   getValue()   
      {
    var   str="";   
    for(var   i=0;i<document.all._selList.length;i++)   
    {   
    str   +=   document.all._selList[i].text+";";
    }
    str   =   str.substring(0,str.length-1);   
    //document.form.t1.value   =   str;     }
      
    function returnSel(_sel)
    {
    var ret="";
    var len=_sel.length;
    for(var i=0;i<len;i++)
    {
    if(i!=len-1)
    {
    ret+=_sel.options[i].value+"~";
    }
    else
    {
    ret+=_sel.options[i].value;
    }
    }
    alert(ret); returnValue = ret;

    window.close();
    }  </script>   
      

  9.   

    把<form id="form1" >改成<form name="form1" >
      

  10.   

    恩，补充一下，上面的jsp的确有问题，form是我后来加的，应该没有form应该也是可以的
    ，上面的javascript也是有错误的，原因是我一直在换引用方式。javascript引用html中document对象的方式和方法有哪些呢？怎么引用?
      

  11.   

    查了下，长见识了
    表单元素(form   input   textarea   select)与框架元素(iframe   frame)用   name   
      这些元素都与表单(框架元素作用于form的target)提交有关,   在表单的接收页面只   
      接收有name的元素,   赋ID的元素通过表单是接收不到值的,   你自己可以验证一下.   
        
      当然上述元素也可以赋ID值,   赋ID值的时候引用这些元素的方法就要变一下了.   
      赋   name:   document.formName.inputName         document.frames("frameName")   
      赋   ID     :   document.all.inputID                       document.all.frameID   
        
      只能赋ID不能赋name的元素:(除去与表单相关的元素都只能赋ID)   
      body   li   a   table   tr   td   th   p   div   span   pre   dl   dt   dd   font   b   等等
      

  12.   

    装上myeclipse 自己弹出来 看下就明白了 document的方法有很多。
    不过lz的JS 真的应该补补了 上面的JS 是最基本的。