动态select正确传值的问题？

我有一个表单，里面有两个select，当选择好左边的select(取名叫left_select)的某项，点击按钮（onClick="fun_select_addany(document.myform)"）时，这项就移动到右边的select（取名叫right_select），函数代码如下：  var zd_str="";
  function fun_select_addany(theform){  
    var i;  
    for (i=0;i<theform.left_select.length;i++){  
      if (theform.left_select.options[i].selected == true){  
        theform.right_select.options[theform.right_select.length]=new Option(theform.left_select.options[i].text,theform.left_select.options[i].value); 
zd_str+=theform.left_select.options[i].value+'|';
        theform.left_select.options.remove(i);  
        i--;  
      }  
    }  
    sort_select(document.myform);  
  }  
现在的问题是，当我操作left_select时，right_select已经正常增加了好几项，我alert(zd_str)时，去只看到‘|||’，没有数据。
当我把这句：
zd_str+=theform.left_select.options[i].value+'|';
改成：
zd_str+=theform.left_select.options[i].innerText+'|';
却又可以看到‘选项TXET|选项TXET|选项TXET|’
而我现在要的效果，就是把这些选的value传出来。
请问高手，应该怎么修改这个函数。

解决方案 »

  1.   

    我说两点：
    1：for (i=0;i<theform.left_select.length;i++ ) 这句似乎有问题，应该是for (i=0;i<theform.left_select.options.length;i++ ) 吧？
    2：左面的option确定有value吗？
      

  2.   

    测试楼主代码，完全没问题，测试如下<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <SCRIPT LANGUAGE="JavaScript">
     var zd_str="";
      function fun_select_addany(theform){  
        var i;  
        for (i=0;i<theform.left_select.length;i++){  
          if (theform.left_select.options[i].selected == true){  
            theform.right_select.options[theform.right_select.length]=new Option(theform.left_select.options[i].text,theform.left_select.options[i].value); 
    zd_str+=theform.left_select.options[i].value+'|';
            theform.left_select.options.remove(i);  
            i--;  
          }  
        }  
        //sort_select(document.myform);  
      }
      </SCRIPT>
     </HEAD> <BODY>
    <form name="theform">
    <select name="left_select" multiple="true">
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
    <option value="4">test4</option>
    </select>
    <select name="right_select" multiple="true"> </select><br>
    <input type="button" value=">>>>>>" onclick="fun_select_addany(this.form)" />
    <input type="button" value=" alert " onclick="javascript:alert(zd_str)" />
    </form>
     </BODY>
    </HTML>
      

  3.   


    有啊。<select name="left_select" style="HEIGHT:200px; WIDTH:150px" multiple>  
                    <option value="a">30度水温常规洗</option>
                    <option value="b">低温熨烫最高110度</option>
                    <option value="c">不可转笼翻转干燥</option>
                    <option value="d">分色洗涤</option>
                    <option value="e">不可拧干</option>
                    <option value="f">不可氯漂</option>
                    <option value="g">不可干洗</option>
                    <option value="h">低温烘干</option>
                  </select>
      

  4.   


    <!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>
    <style type="text/css">
    <!--
    body{margin:0px;padding:6px;}
    body,td,table{
    font-size: 13px;
    }
    td{padding:3px;}
    /*html {overflow-x:visible;}*/
    .STYLE1 {color: #FFFFFF}
    -->
    </style>
      <script language="javascript">  
      var zd_str="";
      function fun_select_addany(theform){  
        var i;  
        for (i=0;i<theform.left_select.length;i++){  
          if (theform.left_select.options[i].selected == true){  
            theform.right_select.options[theform.right_select.length]=new Option(theform.left_select.options[i].text,theform.left_select.options[i].value); 
    zd_str+=theform.left_select.options[i].value+'|';
            theform.left_select.options.remove(i);  
            i--;  
          }  
        }  
        sort_select(document.myform);  
      }  
     
      function fun_select_addall(theform){  
        var i;    
        for (i=0;i<theform.left_select.length;i++){  
          theform.right_select.options[theform.right_select.length]=new Option(theform.left_select.options[i].text);    
        }  
        theform.left_select.length=0;    
        sort_select(document.myform);  
      }  
     
      function fun_select_dltany(theform){  
        var i;  
        for (i=0;i<theform.right_select.length;i++){  
          if (theform.right_select.options[i].selected == true){  
            theform.left_select.options[theform.left_select.length]=new Option(theform.right_select.options[i].text);  
            theform.right_select.options[i] =new Option(""); 
    alert(theform.right_select.options[i].text);
    zd_str=zd_str.replace(theform.right_select.options[i].innerText+'|',"");
            theform.right_select.options.remove(i);  
            i--;  
          }  
        }  
        sort_select(document.myform);  
      }  
     
      function fun_select_dltall(theform){  
        var i;    
        for (i=0;i<theform.right_select.length;i++){  
          theform.left_select.options[theform.left_select.length]=new Option(theform.right_select.options[i].text);  
        }  
        theform.right_select.length=0;          
        sort_select(document.myform);  
      }  
     
     
      function sort_select(theform){  
        var i;  
        var left_array= new Array();            
        for (i=0;i<theform.left_select.length;i++){  
          left_array[i] = new Array(theform.left_select.options[i].text);  
        }  
     
      left_array.sort();  
     
      theform.left_select.length=0;        
         
        for (i=0;i<left_array.length;i++){  
          theform.left_select.options[theform.left_select.length]=new Option(left_array[i]);  
        }  
     
        left_array= new Array();  
      }    
      </script>
    </head><body>
      <form action="select.htm" method="post" name="myform">  
      <div align="center">  
        <center>  
          <left>  
          <table style="FONT-SIZE:smaller">  
          <tr>  
            <td width="116">  
              <table>  
              <tr>  
                <td>  
                  <select name="left_select" style="HEIGHT:200px; WIDTH:150px" multiple="true">  
                    <option value="a">30度水温常规洗</option>
                    <option value="b">低温熨烫最高110度</option>
                    <option value="c">不可转笼翻转干燥</option>
                    <option value="d">分色洗涤</option>
                    <option value="e">不可拧干</option>
                    <option value="f">不可氯漂</option>
                    <option value="g">不可干洗</option>
                    <option value="h">低温烘干</option>
                  </select>            </td>  
              </tr>  
              </table>        </td>  
            <td width="43" align="center"><p><input language="javascript" name="btn_select_addall" onClick="fun_select_addall(document.myform)" value=">>" title="Add all" type=button></p>
    <p><input type="button" value=">" language="javascript" name="btn_select_addany" onClick="fun_select_addany(document.myform)"  class="button" /></p>
    <p><INPUT language="javascript" name="btn_select_dltany" onClick="fun_select_dltany(document.myform)" title ="delete any" type=button value="<"></p>
    <p><INPUT language="javascript" name="btn_select_dltall" onClick="fun_select_dltall(document.myform)" title ="delete all" type=button value="<<"></p></TD>  
            <td width="119">  
              <table style="FONT-SIZE:smaller">  
              <tr>  
                <td>  
                  <select name="right_select" id="s" style="HEIGHT:200px; WIDTH:150px" multiple="true">  
                  </select> 
               </td>  
              </tr>  
              </table>        </td>  
      <td width="10">&nbsp; </td>  
          </TR>
          <tr>
            <td colspan="3" align="center"><input type="button" value=" 提 交 " onclick="selectID()">
        <SCRIPT LANGUAGE="JavaScript">
       <!--
       function selectID(){
        var o=document.getElementById("s").options;
        var len=o.length;
        var str="";
        for (var i=0;i<len ;i++ )
        {
          str +=o[i].value+",";
        }
        alert(str+'<>'+zd_str);
       }
       //-->
       </SCRIPT> 
    </td>
            <td>&nbsp;</td>
          </TR>  
          </TABLE>  
        </center>  
      </div>  
      </form>  
    </body>
    </html>
    确实运行出问题。
      

  5.   

    <%@ page language="java" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <SCRIPT LANGUAGE="JavaScript">
         var zd_str="";
      function fun_select_addany(theform){  
        var i;  
        for (i=0;i<theform.left_select.length;i++){  
          if (theform.left_select.options[i].selected == true){  
            theform.right_select.options[theform.right_select.length]=new Option(theform.left_select.options[i].text,theform.left_select.options[i].value); 
            zd_str+=theform.left_select.options[i].value+'|';
            theform.left_select.options.remove(i);  
            i--;  
          }  
        }  
        //sort_select(document.myform);  
      }
      </SCRIPT>
     </HEAD> <BODY>
        <form name="theform">
            <select name="left_select" style="HEIGHT:200px; WIDTH:150px" multiple>  
                    <option value="a">30度水温常规洗 </option> 
                    <option value="b">低温熨烫最高110度 </option> 
                    <option value="c">不可转笼翻转干燥 </option> 
                    <option value="d">分色洗涤 </option> 
                    <option value="e">不可拧干 </option> 
                    <option value="f">不可氯漂 </option> 
                    <option value="g">不可干洗 </option> 
                    <option value="h">低温烘干 </option> 
                  </select>
            <select name="right_select" multiple="true">        </select><br>
            <input type="button" value=">>>>>>" onclick="fun_select_addany(this.form)" />
            <input type="button" value=" alert " onclick="javascript:alert(zd_str)" />
        </form>
     </BODY>
    </HTML>我测试了没有问题啊.
      

  6.   

    new Option(theform.right_select.options[i].text);  这里你只给了text, 没有给value
      

  7.   

    稍微改了两点， 你再看看。Option构造函数有两个，text和value.<!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>
    <style type="text/css">
    <!--
    body{margin:0px;padding:6px;}
    body,td,table{
        font-size: 13px;
    }
    td{padding:3px;}
    /*html {overflow-x:visible;}*/
    .STYLE1 {color: #FFFFFF}
    -->
    </style>
      <script language="javascript">  
      var zd_str="";
      function fun_select_addany(theform){  
        var i;  
        for (i=0;i<theform.left_select.length;i++){  
          if (theform.left_select.options[i].selected == true){  
          //这里
            theform.right_select.options[theform.right_select.length]=new Option(theform.left_select.options[i].text,theform.left_select.options[i].value); 
            zd_str+=theform.left_select.options[i].value+'|';
            theform.left_select.options.remove(i);  
            i--;  
          }  
        }  
        sort_select(document.myform);  
      }  
     
      function fun_select_addall(theform){  
        var i;    
        for (i=0;i<theform.left_select.length;i++){  
        ////这里
          theform.right_select.options[theform.right_select.length]=new Option(theform.left_select.options[i].text);    
        }  
        theform.left_select.length=0;    
        sort_select(document.myform);  
      }  
     
      function fun_select_dltany(theform){  
        var i;  
        for (i=0;i<theform.right_select.length;i++){  
          if (theform.right_select.options[i].selected == true){  
            theform.left_select.options[theform.left_select.length]=new Option(theform.right_select.options[i].text);  
            theform.right_select.options[i] =new Option(""); 
            alert(theform.right_select.options[i].text);
            zd_str=zd_str.replace(theform.right_select.options[i].innerText+'|',"");
            theform.right_select.options.remove(i);  
            i--;  
          }  
        }  
        sort_select(document.myform);  
      }  
     
      function fun_select_dltall(theform){  
        var i;    
        for (i=0;i<theform.right_select.length;i++){  
          theform.left_select.options[theform.left_select.length]=new Option(theform.right_select.options[i].text, theform.right_select.options[i].value);  
        }  
        theform.right_select.length=0;          
        sort_select(document.myform);  
      }  
     
     
      function sort_select(theform){  
        var i;  
        var left_array= new Array();            
        for (i=0;i<theform.left_select.length;i++){  
          left_array[i] = new Array(theform.left_select.options[i].text);  
        }  
     
      left_array.sort();  
     
      theform.left_select.length=0;        
         
        for (i=0;i<left_array.length;i++){  
          theform.left_select.options[theform.left_select.length]=new Option(left_array[i],left_array[i]);  
        }  
     
        left_array= new Array();  
      }    
      </script>
    </head><body>
      <form action="select.htm" method="post" name="myform">  
      <div align="center">  
        <center>  
          <left>  
          <table style="FONT-SIZE:smaller">  
          <tr>  
            <td width="116">  
              <table>  
              <tr>  
                <td>  
                  <select name="left_select" style="HEIGHT:200px; WIDTH:150px" multiple="true">  
                    <option value="a">30度水温常规洗</option>
                    <option value="b">低温熨烫最高110度</option>
                    <option value="c">不可转笼翻转干燥</option>
                    <option value="d">分色洗涤</option>
                    <option value="e">不可拧干</option>
                    <option value="f">不可氯漂</option>
                    <option value="g">不可干洗</option>
                    <option value="h">低温烘干</option>
                  </select>            </td>  
              </tr>  
              </table>        </td>  
            <td width="43" align="center"><p><input language="javascript" name="btn_select_addall" onClick="fun_select_addall(document.myform)" value=">>" title="Add all" type=button></p>
    <p><input type="button" value=">" language="javascript" name="btn_select_addany" onClick="fun_select_addany(document.myform)"  class="button" /></p>
    <p><INPUT language="javascript" name="btn_select_dltany" onClick="fun_select_dltany(document.myform)" title ="delete any" type=button value="<"></p>
    <p><INPUT language="javascript" name="btn_select_dltall" onClick="fun_select_dltall(document.myform)" title ="delete all" type=button value="<<"></p></TD>  
            <td width="119">  
              <table style="FONT-SIZE:smaller">  
              <tr>  
                <td>  
                  <select name="right_select" id="s" style="HEIGHT:200px; WIDTH:150px" multiple="true">  
                  </select> 
               </td>  
              </tr>  
              </table>        </td>  
      <td width="10">&nbsp; </td>  
          </TR>
          <tr>
            <td colspan="3" align="center"><input type="button" value=" 提 交 " onclick="selectID()">
                    <SCRIPT LANGUAGE="JavaScript">
       <!--
       function selectID(){
        var o=document.getElementById("s").options;
        var len=o.length;
        var str="";
        for (var i=0;i<len ;i++ )
        {
          str +=o[i].value+",";
        }
        alert(str+'<>'+zd_str);
       }
       //-->
       </SCRIPT>         
            </td>
            <td>&nbsp;</td>
          </TR>  
          </TABLE>  
        </center>  
      </div>  
      </form>  
    </body>
    </html>
      

  8.   

    你的sort_select函数有问题，我看了下，你好像是重新构造了left_select，但是你重新构造的只把text值放进去，并没有value值
    改了下你的代码function fun_select_addany(theform){  
        var i;  
        for (i=0;i<theform.left_select.length;i++){  
          if (theform.left_select.options[i].selected == true){ 
            theform.right_select.options[theform.right_select.length]=new Option(theform.left_select.options[i].text,theform.left_select.options[i].value); 
            zd_str+=theform.left_select.options[i].value+'|';
            if(theform.left_select.selectedIndex>=0){
    theform.left_select.remove(theform.left_select.selectedIndex);
    }
          }  
        }  
        sort_select(document.myform);  
      }   function sort_select(theform){  
        var i;  
        var left_array= new Array();            
        for (i=0;i<theform.left_select.length;i++){  
      left_array[i] = new Array();
          left_array[i][0] =theform.left_select.options[i].text;
      left_array[i][1] = theform.left_select.options[i].value;
        }  
     
      left_array.sort();  
     
      theform.left_select.length=0;        
         
        for (i=0;i<left_array.length;i++){  
          theform.left_select.options[theform.left_select.length]=new Option(left_array[i][0],left_array[i][1]);  
        }  
     
        left_array= null;  
      }    
      

  9.   

    解决了...function sort_select(theform){  
        var i;  
        var left_array= new Array();            
        for (i=0;i<theform.left_select.length;i++){  
          left_array[i] = new Array(theform.left_select.options[i].text);  
        }  
     
      left_array.sort();  
     
      theform.left_select.length=0;        
         
        for (i=0;i<left_array.length;i++){  
          theform.left_select.options[theform.left_select.length]=new Option(left_array[i]);  
        }  
     
        left_array= new Array();  
      }    这个方法有错误，当 theform.left_select 重新排序的时候，option 的 value 值没有被赋值.应该改为:function sort_select(theform){  
        var i;  
        var j;
        var left_arraytext = new Array();
        var left_arrayvalue = new Array();            
        for (i=0;i<theform.left_select.length;i++){  
          left_arraytext[i] = new Array(theform.left_select.options[i].text);
          left_arrayvalue[i] = new Array(theform.left_select.options[i].value);
        }  
     
      left_array.sort();  
     
      theform.left_select.length=0;        
         
        for (i=0;i<left_array.length;i++){  
          theform.left_select.options[theform.left_select.length] = new Option(left_arraytext[i], left_arrayvalue[i]);  
        }  
     
        left_array= new Array();  
      }