<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
select {
width: 200px;
}
</style>
</head>
<body>
<select id="s1" multiple="multiple" size="7"></select>
<input type="text" id="txt" />
<input type="button" id="btn" value="添加" />
<input type="button" id="btn_del" value="删除" />
</body>
</html>
<script>
var s1 = document.getElementById("s1");
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
var btn_del = document.getElementById("btn_del");
btn.onclick = function() {
if(txt.value.trim() != "") {
var temp_opt = document.createElement('option');
temp_opt.innerText = txt.value;
s1.appendChild(temp_opt);
txt.value = "";
}
}
btn_del.onclick = function(){
var x = s1.selectedOptions[0];
s1.removeChild(x);
}
</script>
