添加与删除

<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>

posted @ 2017-09-15 10:52  曉瀦  阅读(153)  评论(0编辑  收藏  举报