左右两部分 中间选择按钮(添加,删除)
来源:互联网 发布:sony签约网络经销商 编辑:程序博客网 时间:2024/05/29 19:14
<script type="text/javascript">window.onload = function() { // 获取两个 select 和两个 button var select_left = document.getElementById("left"), select_right = document.getElementById("right"), button_add = document.getElementById("add"), button_delete = document.getElementById("delete"); // 点击添加 button_add.onclick = function() { // 获取左边被选择的 option 的索引 var idx = select_left.selectedIndex; // 如果左边有 option 被选择 if(idx !== -1) {alert(select_left[idx].value); // 将此 option 移动到右边 select_right.appendChild(select_left[idx]); }else{alert('必须选择一个');} }; // 点击删除 button_delete.onclick = function() { // 获取右边被选择的 option 的索引 var idx = select_right.selectedIndex; // 如果右边有 option 被选择 if(idx !== -1) { // 将此 option 移动到左边 select_left.appendChild(select_right[idx]); } };};</script>
<select id="left" size="10" style="width: 100px;"><option value="cpp">++</option><option value="java">JAVA</option><option value="html">HTML</option><option value="css">CSS</option><option value="js">JavaScript</option><option value="php">PHP</option></select> <div style="display: inline-block;"><input type="button" id="add" value="添加" /><input type="button" id="delete" value="删除" /></div> <select id="right" size="10" style="width: 100px;"> </select>