<body> <select size="7" style=" 200px;" id="slt"> <option value="123">123</option> </select><br /><br /> <input type="text" id="txt"/> <input type="button" value="添 加" id="btn"/> </body> </html> <script> var txt = document.getElementById('txt'); var slt = document.getElementById('slt'); document.getElementById('btn').onclick = function(){ var opt = document.createElement('option'); //opt.value = txt.value; opt.innerText = txt.value; slt.appendChild(opt); txt.value = ''; } </script>
要注意最后的txt.value=‘ ’。提高用户体验。
两个text表格属性相互移动的问题。
<body> <select id="left_slt" size="7" multiple="multiple" style=" 150px;"> <option>ABC</option> <option>123</option> <option>xyz</option> <option>IJK</option> </select> <input type="button" id="to_right" value="向右" /> <input type="button" id="to_left" value="向左" /> <select id="right_slt" size="7" style=" 150px;"> </select> </body> </html> <script> var left_slt=document.getElementById('left_slt'); var left_right=document.getElementById('left_right'); document.getElementById('to_right').onclick=function(){ right_slt.appendChild(left_slt.options[left_slt.selectedIndex]); } document.getElementById('to_left').onclick=function(){ left_slt.appendChild(right_slt.options[right_slt.selectedIndex]); } </script>