关于列表框按选择顺序取值的问题

Question

<form name=form1 >
<select id="aaa" name="aaa" multiple  onchange="mSelect()">
<option value ="1">A</option>
<option value ="2">B</option>
<option value ="3">C</option>
<option value ="4">D</option>
<option value ="5">E</option>
<option value ="6">F</option>
<option value ="7">G</option>
<option value ="8">H</option>
</select>
</form>
<script language=javascript>
var s="";
function mSelect(){
var frm=document.form1;
var s1=(frm.aaa.value).toString();
s=s.toString()+s1;
alert(s);
}
</script>

Answer 1

ls正解，按照要求可稍微改改
<script language=javascript>
var s="";
var frm=document.form1;
var sel = frm.aaa.selectedIndex;
s += frm.aaa.options[sel].text+' ';
alert(s);
}
</script>

Answer 2

<form name=form1 >
<select id="aaa" name="aaa" multiple  onchange="mSelect(this)">
<option value ="1">A</option>
<option value ="2">B</option>
<option value ="3">C</option>
<option value ="4">D</option>
<option value ="5">E</option>
<option value ="6">F</option>
<option value ="7">G</option>
<option value ="8">H</option>
</select>
</form>
<script language=javascript>
var tempstr = "";
function mSelect(obj)
{
for(var i=0;i<obj.options.length;i++)
{
var oOption = obj.options[i];
if(tempstr.indexOf(oOption.value)==-1 && oOption.selected)tempstr += oOption.value;
if(tempstr.indexOf(oOption.value)>-1 && !oOption.selected)tempstr = tempstr.replace(oOption.value,""); }
alert(tempstr);
}</script>

Answer 3

<form name=form1 >
<select id="aaa" name="aaa" multiple  onchange="mSelect(this)">
<option value ="1">A</option>
<option value ="2">B</option>
<option value ="3">C</option>
<option value ="4">D</option>
<option value ="5">E</option>
<option value ="6">F</option>
<option value ="7">G</option>
<option value ="8">H</option>
</select>
</form>
<script language=javascript>
var tempstr = "";
function mSelect(obj)
{
for(var i=0;i<obj.options.length;i++)
{
var oOption = obj.options[i];
if(tempstr.indexOf(oOption.value)==-1 && oOption.selected)tempstr += oOption.value;
if(tempstr.indexOf(oOption.value)>-1 && !oOption.selected)tempstr = tempstr.replace(oOption.value,"");
}
alert(tempstr);
}
</script>

Answer 4

顶一个,试了一下,楼上几位说的,如果多选,按住 ctrl键, 则楼主想要的效果还是达不到. 期待高人指点

Answer 5

为什么我稍微改了一下就不可以了？<form name=form1 >
<select id="aaa" name="aaa" multiple >
<option value ="1">A</option>
<option value ="2">B</option>
<option value ="3">C</option>
<option value ="4">D</option>
<option value ="5">E</option>
<option value ="6">F</option>
<option value ="7">G</option>
<option value ="8">H</option>
</select>
 <input type="button" value="按钮" name="B3" onclick ="mSelect()"><input type="text" name="ccc" size="20"></form>          
        
 <textarea rows="20" name="bbb" cols="10"></textarea><script language=javascript>     
var tempstr1 = "";
var tempstr2 = "";
function mSelect(){
var obj= document.getElementById("aaa")
for(var i=0;i<obj.options.length;i++)
{
var oOption = obj.options[i];
if(tempstr1.indexOf(oOption.value)==-1 && oOption.selected)tempstr1 += oOption.value + "\n" ;
if(tempstr1.indexOf(oOption.value)>-1 && !oOption.selected)tempstr1 = tempstr1.replace(oOption.value,"");if(tempstr2.indexOf(oOption.text)==-1 && oOption.selected)tempstr2 += oOption.text + " " ;
if(tempstr2.indexOf(oOption.text)>-1 && !oOption.selected)tempstr2 = tempstr2.replace(oOption.text,"");}
document.getElementById("bbb").value= tempstr2;
document.getElementById("ccc").value= tempstr1;}</script>

Answer 6

谢谢 gzdiablo，我改动一下，就不可以按选择顺序了？为什么

Answer 7

方法执行时间的问题<select id="aaa" name="aaa" multiple onchange="mSelect()">这样是每次选中一个 列表元素时激活方法!
但你现在这样写是 每次点击按钮的时候激活方法 当然不行

Answer 8

给你解释一下//obj是select列表
//tempstr是选中字符串 公共变量
//遍历每个列表元素
for(var i=0;i<obj.options.length;i++)
{
var oOption = obj.options[i];//oOption为当前列表元素
//如果 列表元素的值不在选中的字符串中 并且本元素被选中 则把本元素的值加入选中字符串中
if(tempstr.indexOf(oOption.value)==-1 && oOption.selected)tempstr += oOption.value;
//如果 列表元素的值在不选中的字符串中 并且本元素被选中 则在选中字符串中删除本元素
if(tempstr.indexOf(oOption.value)>-1 && !oOption.selected)tempstr = tempstr.replace(oOption.value,"");
}....好像问题满多 如果列表大于10个很可能会出错 看来还得改

Answer 9

function mSelect(obj)
{
for(var i=0;i<obj.options.length;i++)
{
var oOption = obj.options[i];
if(tempstr.indexOf(oOption.value + "|")==-1 && oOption.selected)tempstr += oOption.value + "|";
if(tempstr.indexOf(oOption.value + "|")>-1 && !oOption.selected)tempstr = tempstr.replace(oOption.value,"");
}
alert(tempstr.split("|").join(""));
}

Answer 10

以下代码，权当一顶：<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
</head> 
<body >
 
<div style="font-size:10pt;">
注1：左右移动进行选取 <br/>      <br/>
注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。<br/>       
注-----：作者JK：<a href="mailTo:[email protected]?subject=About%20MoveRightOrLeft">[email protected]</a><br/>    
<hr/>
</div><form name=frm><table>
<tr > 
<td> 
<select name=SrcSelect size=6 style="font-size:11pt;width:200px;height:160px" multiple ondblclick="moveLeftOrRight(document.frm.SrcSelect,document.frm.ObjSelect)"> 
<option value="1">test1</option> 
<option value="2">test2</option> 
<option value="3">test3</option> 
<option value="4">test4</option> 
<option value="5">test5</option> 
<option value="6">test6</option> 
<option value="7">test7</option> 
<option value="8">test8</option> 
<option value="9">test9</option> 
</select>
</td> 
<td width="30px">    
<input align="left" type=button value=">"  onclick="moveLeftOrRight(document.frm.SrcSelect,document.frm.ObjSelect)"  ><br><br>
<input align="left" type=button value="<"  onclick="moveLeftOrRight(document.frm.ObjSelect,document.frm.SrcSelect)"  >
</td>
<td> 
<select name=ObjSelect size=6 style="font-size:11pt;width:200px;height:160px" multiple ondblclick="moveLeftOrRight(document.frm.ObjSelect,document.frm.SrcSelect)"> 
<option value="11">test11</option> 
<option value="12">test12</option> 
<option value="13">test13</option> 
<option value="14">test14</option> 
<option value="15">test15</option> 
<option value="16">test16</option> 
</select>
</td> 
<td width="30px">
<input type=button value="A"  onclick="moveUp()" > <br><br> 
<input type=button value="V"  onclick="moveDown()" >
</td>
</tr> 
</table></form>
</body>  
  
<script language=javascript>  
function moveUp()  
{ 
var theObjOptions=document.frm.ObjSelect.options;
for(var i=1;i<theObjOptions.length;i++)
{
if( theObjOptions[i].selected && !theObjOptions[i-1].selected )
{
swapOptionProperties(theObjOptions[i],theObjOptions[i-1]);
}
}
}  
  
function moveDown()  
{ 
var theObjOptions=document.frm.ObjSelect.options;
for(var i=theObjOptions.length-2;i>-1;i--)
{
if( theObjOptions[i].selected && !theObjOptions[i+1].selected )
{
swapOptionProperties(theObjOptions[i],theObjOptions[i+1]);
}
}
}  function swapOptionProperties(option1,option2){
var tempStr=option1.value;
option1.value=option2.value;
option1.value=tempStr;
tempStr=option1.text;
option1.text=option2.text;
option2.text=tempStr;
tempStr=option1.selected;
option1.selected=option2.selected;
option2.selected=tempStr;
}  
  
function moveLeftOrRight(fromObj,toObj)  
{  
for(var i=0;i<fromObj.length;i++)
{
var srcOption=fromObj.options[i];
if(srcOption.selected)
{
toObj.appendChild(srcOption);
i--;
}
}
}  
  
  
 
</script> 

Answer 11

<form name=form1 >
<select id="aaa" name="aaa" multiple onchange="Selected(this)">
<option value ="1">A</option>
<option value ="2">B</option>
<option value ="3">C</option>
<option value ="4">D</option>
<option value ="5">E</option>
<option value ="6">F</option>
<option value ="7">G</option>
<option value ="8">H</option>
<option value ="9">I</option>
<option value ="10">J</option>
<option value ="11">K</option>
</select>
<input type="button" value="按钮" name="B3" onclick ="mSelect()"><input type="text" name="ccc" size="20"></form>          
<textarea rows="20" name="bbb" cols="10"></textarea>
<script language=javascript>  
var temparr = new Array();
var tempstr = "";
var tempstr1 = "";
var tempstr2 = "";
function Selected(obj)
{
for(var i=0;i<obj.options.length;i++)
{
var oOption = obj.options[i];
var tempvalue = "|"+oOption.value+"|";
if(tempstr.indexOf(tempvalue)==-1 && oOption.selected)tempstr += tempvalue;
if(tempstr.indexOf(tempvalue)>-1 && !oOption.selected)tempstr = tempstr.replace(tempvalue,"");
}
temparr = tempstr.replace(/(?:\|$|^\|)/g,"").split("||");
}function mSelect()
{
document.getElementById("bbb").value= temparr.join(" ");
document.getElementById("ccc").value= temparr.join("\n");
}
</script>

Answer 12

谢谢高手gzdiablo的帮助，
随便问一下：
temparr = tempstr.replace(/(?:\|$|^\|)/g,"").split("||");这句话我有点不明白？ Select.option 的value值是asp程序读数据库产生的.应该不会有非法字符，为什么要replace？如果不replace，会有什么后果？非常感谢你，稍后我就结贴加分

Answer 13

temparr = tempstr.replace(/(?:\|$|^\|)/g,"").split("||");因为我在每个取到的东西前后加了个"|" 为了区分 1 和 11
所以生成的字符串是这样的 |2||1||3||4|tempstr.replace(/(?:\|$|^\|)/g,"") 这句是去除字符串前后的"|"
也就是 2||1||3||4再split("||")就把处理后的字符串变成数组最后输出的时候是直接用数组的join()方法