JS ListBox的简单功能实现代码_javascript技巧

页面效果如下：

代码也贴出来跟大家分享：

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title> <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 id="input" style="width:200px; font-size:16px"> <option>缇</option></select> </td> </tr> </table>