HTML组合框添加元素与删除元素

来源：互联网发布：mac 大文件上传编辑：程序博客网时间：2024/06/09 13:49
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>组合框</title><script type="text/javascript" language="javascript">window.onload=function(){var oTxt = document.getElementById("txt");var oBtn = document.getElementById("btn");var oBtnFirst = document.getElementById("btn_first");var oBtnClear = document.getElementById("btn_clear");var oBox = document.getElementById("box");oBtnFirst.onclick=function(){//插在首位var oOption = document.createElement("option");oOption.value=oTxt.value;oOption.innerHTML=oTxt.value;oBox.insertBefore(oOption,oBox.getElementsByTagName("option")[0]);//插在第一位的前面oBox.selectedIndex=0;//选中第一个oTxt.value="";//重置文本框}oBtn.onclick=function(){//插在末尾var oOption = document.createElement("option");//创建option元素oOption.value=oTxt.value;oOption.innerHTML=oTxt.value;oBox.appendChild(oOption);//向下拉列表框添加这个子元素oBox.selectedIndex=oBox.getElementsByTagName("option").length-1;//选中刚刚添加的最后一个元素oTxt.value="";//重置文本框}oBtnClear.onclick=function(){var aOption = oBox.getElementsByTagName("option");for(var i = aOption.length-1;i>=0;i--){//遍历每一个选项并移除，必须倒序遍历，否则每次只能删除一半oBox.removeChild(aOption[i]);}}}</script></head><body><input type="text" id="txt" /><input type="button" value="插在首位" id="btn_first" /><input type="button" value="插在末尾" id="btn" /><input type="button" value="全部删除" id="btn_clear" /><br /><select id="box"> <option value="江苏">江苏</option> <option value="河北">河北</option></select></body></html>
可通过AJAX请求数据添加到组合框中
1 0