有关select中的value值问题，急~~！在线等待！

我要实现的是两个select之间互相迁移问题，但发现实现add操作的时候value值为空，如何解决呢？我点击"->"按钮移
过去了，在点击"<-"移过来的时候alert出来的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=gb2312" />
<title>Untitled Document</title>
<script>
function addItem(objFrom,objTo){
for(var i = 0; i < objFrom.options.length;i++){
if(objFrom.options[i].selected == true){
var selectItem = new Option(objFrom.options[i].text,objFrom.options[i].value);
alert(objFrom.options[i].value);//alert出来的value是空。
objTo.options.add(selectItem);
objFrom.options.remove(i);
}
}
sortItem(objTo);
}
function allAddItem(objFrom,objTo){
for(var i = objFrom.options.length - 1;i>=0;i--){
var objItem = new Option(objFrom.options[i].text,objFrom.options[i].value);
objTo.options.add(objItem);
objFrom.options.remove(i);
}
sortItem(objTo);
}
function sortItem(objTo){
var ln = objTo.options.length;
var arrText = new Array();
var arrValue = new Array();
for(var i=0;i<ln;i++){
arrText[i] = objTo.options[i].text;
}
arrText.sort();
for(var i=0;i<ln;i++){
if(arrText[i] == objTo.options[i].text){
arrValue[i] = objTo.options[i].value;
}
}
while(ln--){
objTo.options[ln] = null;
}
for(i = 0;i<arrText.length;i++){
objTo.add(new Option(arrText[i],arrValue[i]));
}
}
function delItem(objTo,objFrom){
for(var i = 0 ;i<objTo.options.length;i++){
for(var j = 0 ;j<objFrom.options.length;j++){
if(objTo.options[i].value == objFrom.options[j].value){
objFrom.options.remove(j);
}
}
}
}
</script>
</head><body onload="delItem(selectSo,selectColor)">
<table>
<tr>
<td>Color Code </td>
<td></td>
<td>Sample Order </td>
</tr>
<tr>
<td>
<select id="selectColor" multiple="multiple" style="width:200px;height:200px;">
     <option value="Black">Black</option>
     <option value="Blue">Blue</option>
     <option value="DK-RS">DARK RINSE</option>
     <option value="DK-SW">DARK STONEWASH</option>
     <option value="Green">Green</option>
     <option value="MD-SL">MED SANDBLAST</option>
<option value="MD-SW">MED STONEWASH</option>
     <option value="NA">Not applicable</option>
     <option value="Yellow">Yellow</option>
     <option value="Red">Red</option>
</select> </td>
<td>
<table>
<tr>
<td><input type="button" id="btn1" value="-> " onclick="addItem(selectColor,selectSo)"/></td>
</tr>
<tr>
<td><input type="button" id="btn2" value="->>" onclick="allAddItem(selectColor,selectSo)"/></td>
</tr>
<tr>
<td><input type="button" id="btn3" value="<<-" onclick="allAddItem(selectSo,selectColor)"/></td>
</tr>
<tr>
<td><input type="button" id="btn4" value="<- " onclick="addItem(selectSo,selectColor)"/></td>
</tr>
</table>
</td>
<td>
<select id="selectSo" multiple="multiple" style="width:200px;height:200px;">
<option value="NA">Not applicable</option>
     <option value="Yellow">Yellow</option>
     <option value="Red">Red</option>
</select>
</td>
</tr>
</table>
</body>
</html>

解决方案 »

  1.   

    我查找到到的是在排序中没有得到select中的value，怎样实现排序呢？大家过来帮下忙哦。
      

  2.   

    sortItem有问题<!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=gb2312" /> 
    <title>Untitled Document </title> 
    <script> 
    function addItem(objFrom,objTo){ 
    for(var i = 0; i < objFrom.options.length;i++){ 
    if(objFrom.options[i].selected){
    alert(objFrom.options[i].value);
    var selectItem = new Option(objFrom.options[i].text,objFrom.options[i].value); 
    //alert出来的value是空。 
    objTo.options.add(selectItem); 
    objFrom.options.remove(i); 
    } 
    } 
    sortItem(objTo); 
    } function allAddItem(objFrom,objTo){ 
    for(var i = objFrom.options.length - 1;i>=0;i--){ 
    var objItem = new Option(objFrom.options[i].text,objFrom.options[i].value); 
    objTo.options.add(objItem); 
    objFrom.options.remove(i); 
    } 
    sortItem(objTo); 
    } 
    function sortItem(objTo){ 
    var ln = objTo.options.length; 
    var arrText = new Array(); 
    var arrValue = new Array(); 
    for(var i=0;i <ln;i++){ 
    arrText[i] = objTo.options[i].text; 
    } 
    arrText.sort(); 
    for(var i=0;i<ln;i++){
    for(var j=0;j<objTo.options.length;j++){
    if(arrText[i] == objTo.options[j].text){ 
    arrValue[i] = objTo.options[j].value;
    break; 
    }
    }
    }
    while(ln--){ 
    objTo.options[ln] = null; objTo.options.remove(0);
    } 
    for(var i = 0;i <arrText.length;i++){ 
    objTo.add(new Option(arrText[i],arrValue[i])); 
    } 
    } 
    function delItem(objTo,objFrom){ 
    for(var i = 0 ;i <objTo.options.length;i++){ 
    for(var j = 0 ;j <objFrom.options.length;j++){ 
    if(objTo.options[i].value == objFrom.options[j].value){ 
    objFrom.options.remove(j); 
    } 
    } 
    } 
    }
    </script> 
    </head> <body onload="delItem(selectSo,selectColor)"> 
    <table> 
    <tr> 
    <td>Color Code </td> 
    <td> </td> 
    <td>Sample Order </td> 
    </tr> 
    <tr> 
    <td> 
    <select id="selectColor" multiple="multiple" style="width:200px;height:200px;"> 
        <option value="Black">Black </option> 
        <option value="Blue">Blue </option> 
        <option value="DK-RS">DARK RINSE </option> 
        <option value="DK-SW">DARK STONEWASH </option> 
        <option value="Green">Green </option> 
        <option value="MD-SL">MED SANDBLAST </option> 
    <option value="MD-SW">MED STONEWASH </option> 
        <option value="NA">Not applicable </option> 
        <option value="Yellow">Yellow </option> 
        <option value="Red">Red </option> 
    </select> </td> 
    <td> 
    <table> 
    <tr> 
    <td> <input type="button" id="btn1" value="-> " onclick="addItem(selectColor,selectSo)"/> </td> 
    </tr> 
    <tr> 
    <td> <input type="button" id="btn2" value="->>" onclick="allAddItem(selectColor,selectSo)"/> </td> 
    </tr> 
    <tr> 
    <td> <input type="button" id="btn3" value="<<-" onclick="allAddItem(selectSo,selectColor)"/> </td> 
    </tr> 
    <tr> 
    <td> <input type="button" id="btn4" value="<-" onclick="addItem(selectSo,selectColor)"/> </td> 
    </tr> 
    </table> 
    </td> 
    <td> 
    <select id="selectSo" multiple="multiple" style="width:200px;height:200px;"> 
    <option value="NA">Not applicable </option> 
        <option value="Yellow">Yellow </option> 
        <option value="Red">Red </option> 
    </select> 
    </td> 
    </tr> 
    </table> 
    </body> 
    </html> 
      

  3.   

    加了break还是有问题哦。alert出来的value值还是空的。
      

  4.   

    不是加break的问题，我改成双重循环了，全部拷贝下来运行看下
      

  5.   

    我看了代码好像没问题，但为啥源文件右边的select就没添加option呢？想不通！