用JS做了个ListBox的简单功能

最新推荐文章于 2013-05-27 17:51:49 发布

wen5566

最新推荐文章于 2013-05-27 17:51:49 发布

阅读量178

点赞数

分类专栏： JavaScript 文章标签： J# XHTML HTML

JavaScript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!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></title>  
</head>  
<body>  
<script language="JavaScript" type="text/javascript">  
<!--   
function addIt(){   
   var input = document.getElementById("input");   
   var output = document.getElementById("output");   
   for(i = 0; i < input.length; i ++ )   {   
      if(input[i].selected == true)      {   
         if( output.length == 0){   
            var option = new Option();   
            option.text = input[i].innerText;   
            output.add(option);   
         }   

         var isExist = false;   
         for(j = 0; j < output.length; j ++ ){   
            if (output[j].text ==  input[i].innerText){   
               isExist = true;   
               break;   
            }   
         }   

         if (isExist == false){   
            var option = new Option();   
            option.text = input[i].innerText;   
            output.add(option);   
         }   
      }   
   }   
}   

function deleteIt(){   
    var output = document.getElementById("output");   
    for(i = 0; i<output.length; i++){   
        if (output[i].selected == true){   
            output.options.removeChild(output[i--]);   
        }   
    }   

}   
// -->  
</script>  
<table width="80%" border="0" align="center" style="margin-top:20px;">  
  <tr>  
    <td align="right">  
      <select name="input" size="10" multiple="multiple" id="input" style="width:200px; font-size:16px">  
        <option>美元/英镑</option>  
        <option>美元/港币</option>  
        <option>美元/新加坡元</option>  
        <option>美元/日元</option>  
        <option>美元/加拿大元</option>  
        <option>美元/欧元</option>  
      </select>  
    </td>  
    <td align="center">  
      <p>  
        <input type="button" name="Submit" value="增  加" onclick="addIt()"/>  
      </p>  
      <p>  
        <input type="button" name="Submit2" value="删  除" onclick="deleteIt()"/>  
      </p>  
    </td>  
    <td>  
      <select name="output" size="10" multiple="multiple" id="output" style="width:200px; font-size:16px">  
      </select>  
    </td>  
  </tr>  
</table>  
</body>  
</html>