动态select正确传值的问题？

aming0412 2009-07-03 09:10:32
我有一个表单，里面有两个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传出来。
请问高手，应该怎么修改这个函数。
...全文
207 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
swweb 2009-07-07
  • 打赏
  • 举报
 回复
你这样写,好像排序不太好做..
ZhaoHuiZiXin 2009-07-03
  • 打赏
  • 举报
 回复
我刚该出来就结贴了. 哎太慢了.
ZhaoHuiZiXin 2009-07-03
  • 打赏
  • 举报
 回复
解决了...

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();
}

eugenepada 2009-07-03
  • 打赏
  • 举报
 回复
你的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;  

  }
sunxing007 2009-07-03
  • 打赏
  • 举报
 回复
稍微改了两点， 你再看看。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">  </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> </td>

      </TR>  

      </TABLE>  

    </center>  

  </div>  

  </form>  

</body>

</html>
sunxing007 2009-07-03
  • 打赏
  • 举报
 回复
new Option(theform.right_select.options[i].text); 这里你只给了text, 没有给value
aming0412 2009-07-03
  • 打赏
  • 举报
 回复
大家有点耐心，好不好。拷一下我的源码到文件里测试，帮我看看究竟是什么问题？
ZhaoHuiZiXin 2009-07-03
  • 打赏
  • 举报
 回复
<%@ 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>

我测试了没有问题啊.
aming0412 2009-07-03
  • 打赏
  • 举报
 回复 


<!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">  </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> </td>

      </TR>  

      </TABLE>  

    </center>  

  </div>  

  </form>  

</body>

</html>


确实运行出问题。
aming0412 2009-07-03
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 valen_jia 的回复:]
测试楼主代码，完全没问题，测试如下

HTML code
<!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…
[/Quote]

的确，用你的这个，完全可用。我给你看看我的所有源码：
aming0412 2009-07-03
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 sunxing007 的回复:]
我说两点：
1：for (i=0;i <theform.left_select.length;i++ ) 这句似乎有问题，应该是for (i=0;i <theform.left_select.options.length;i++ ) 吧？
2：左面的option确定有value吗？
[/Quote]

有啊。

<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>
valen_jia 2009-07-03
  • 打赏
  • 举报
 回复
测试楼主代码，完全没问题，测试如下


<!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>
sunxing007 2009-07-03
  • 打赏
  • 举报
 回复
我说两点：
1：for (i=0;i<theform.left_select.length;i++ ) 这句似乎有问题，应该是for (i=0;i<theform.left_select.options.length;i++ ) 吧？
2：左面的option确定有value吗？
SSM入门到精通项目实战（附源码）
主要内容 掌握MyBatis的常用配置，MyBatis的Mapper映射文件的编写，包含select, update, insert和delete，MyBatis映射文件 之parameters和@Param注解，MyBatis映射文件的resultMap的使用，MyBatis映射之association...
select传值到后台的问题
select传到后台的值对应的是option中的value，对应的变量名是select中的name。 由此可知， 上面传到后台后，adminId=${admin.id}，传到后台的只是员工id,要想获取员工名称，还得在查一遍数据库。
el-form表单中el-select配置正确但form传值为label
el-form 中通过ation属性绑定url el-button按钮添加 native-type=“submit”属性后，直接通过点击按钮在浏览器打开新的标签页显示报表且传递参数。发现正确传递，唯独select标签传递参数有问题 v-model绑定值为value 但是传递到报表显示label 通过一下修改正确传递。
select传值给后台、根据后台值选中
select传值给后台、根据后台值选中. 某个实体类新增、修改为同一个jsp页面，使用form表单向后端传递数据。其中有个select选择框，需要达到的效果为：新增的时候 显示默认值，修改的时候 显示从后端传过来的值。
关于bootstrap select 多选只能传递第一个选项的值到后端的问题
bootstrap select 多选传值只能传递第一个的值 最近在敲代码的时候使用到了bootstrap的select控件，需要将用户想要选择的多个组信息传递到后端。如下图所示： 这个问题困扰了我很久，最后才找到了原因。是由于我在传递数据的时候使用的序列化form表单的方法，那么val()就只能取到一个选中的值，无法传入多选的值。js代码如下： $.fn.ajaxselectmore = function(options) { var select = this; var data = o
JavaScript

87,919

社区成员

224,618

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章