动态插入OPTION，自动排序

Question

<select name="a" multiple>
<option value="8">8</option>
<option value="6">6</option>
<option value="4">4</option>
<option value="2">2</option>
</select>
<select name="b" multiple>
</select>
<input name="button1" type="button" value="按" onclick="show()">
<script language=javascript>
function show()
{
var obja=document.getElementById("a").options
var objselectb=document.getElementById("b")
var objb=objselectb.options
var temp=new Array();
for(var i=objb.length-1;i>-1;i--)
{
temp[temp.length]=objb[i].value
}
for(var i=obja.length-1;i>-1;i--)
{
if(obja[i].selected)
{
temp[temp.length]=obja[i].value
obja[i]=null
}
}
temp=temp.sort()
objb.length=0
for(var i=0;i<temp.length;i++)
{
objselectb.options[i]=new Option(temp[i],temp[i])
}
}




if(objb.length==0)
{
objb[0]=new Option(obja[i].value,obja[i].value)
}
else
{
var flag=true
for(var j=0;j<objb.length;j++)
{
if(flag)
{
if(parseInt(objb[j].value)<parseInt(obja[i].value))
{
objb[j]=new Option(obja[i].value,obja[i].value)
}
}
}
}
</script>

Answer 1

<select id="a" multiple size="4">
<option value="8">8</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="2">2</option>
</select>
<input type="button" value=">>" onclick="move()"/>
<select id="b" multiple size="4">
</select>
<script type="text/javascript">
function move(){
for(var i=0;i<a.options.length;i++)
{
if(a.options[i].selected)
{
n = a.options[i].value;
break;
}
} for(var i=0;i<b.options.length;i++)
{
if(b.options[i].value > n)
{
break;
}
}
b.options.add(new Option(n,n), i);
}
</script>

Answer 2

ice_berg16(寻梦的稻草人) 的不错, 不过在兼容性方面友好点会更好

Answer 3

直接引用id和options.add方法only for IE

Answer 4

<table>
<tr>
<td>
<select id="ls" multiple NAME="ls">
<option value=8>8</option>
<option value=6>6</option>
<option value=4>4</option>
<option value=12>12</option>
</select>
</td>
<td valign=middle>
<input type=button value="->" id=btnR onclick="selMove('R')"><br>
<input type=button value="<-" id="btnL" onclick="selMove('L')">
</td>
<td>
<select id="rs" multiple NAME="rs">
</select>
</td>
</tr>
</table>
<script language=javascript>function selMove(flag)
{
// 根据flag判断是向左(L)还是向右移动(R)
var fromObj = (flag=='R'?ls:rs);
var toObj = (fromObj.id=="ls"?rs:ls);
var selArr = [];

for(var i=fromObj.options.length-1;i>=0;i--) // 对源列表做一个遍历
{
if(fromObj.options[i].selected) // 判断选项是否被选中
{
selArr.push(fromObj.options[i].value); //将选中项存进数组
fromObj.options.remove(i);
}
}
for(var i=toObj.options.length-1;i>=0;i--) // 对目标列表做一个遍历
{selArr.push(toObj.options[i].value);} //将所有存进数组

selArr.sort(function(a,b){return a-b}); //排序

for(var i=0;i<selArr.length;i++)
{
var op = new Option(selArr[i],selArr[i]);
//op.selected = true;
toObj.options[i]=op;
}
}
</script>