<body>
<select size="7" style="width: 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="width: 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="width: 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>