HTML列表框元素的操作

来源：互联网发布：丹麦经济数据编辑：程序博客网时间：2024/06/05 09:45
<!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><style type="text/css">#container{margin: 10px 0px 0px;}select{width:100px;}input[type="button"][title^="移动"]{width:50px;margin:0px 0px 3px;}/*只匹配type="button" 前缀有移动的按钮，后缀匹配为$*/#box{display:block;float:left;}#box1{display:block;float:left;}#control{width:52px;float:left;margin:0px 2px;}</style><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 oBtnOne = document.getElementById("btn_one");var oBtnOne1 = document.getElementById("btn_one1");var oBtnSelected = document.getElementById("btn_selected");var oBtnSelected1 = document.getElementById("btn_selected1");var oBtnAll = document.getElementById("btn_all");var oBtnAll1 = document.getElementById("btn_all1");var oBox = document.getElementById("box");var oBox1 = document.getElementById("box1");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]);}}//列表元素操作//向左列移动所有元素oBtnAll.onclick=function(){var aOption = oBox.getElementsByTagName("option");for(var i = aOption.length-1;i>=0;i--){oBox1.appendChild(aOption[i]);//Box.removeChild(aOption[i]);//不需要再移除oBox=的元素}}//向右列移动所有元素oBtnAll1.onclick=function(){var aOption = oBox1.getElementsByTagName("option");for(var i = aOption.length-1;i>=0;i--){oBox.appendChild(aOption[i]);}}//向右列移动一个元素oBtnOne.onclick=function(){var aOption = oBox.getElementsByTagName("option");for(var i = aOption.length-1;i>=0;i--){if(aOption[i].selected){oBox1.appendChild(aOption[i]);break;//移动一个后跳出循环}}}//向左列移动一个元素oBtnOne1.onclick=function(){var aOption = oBox1.getElementsByTagName("option");for(var i = aOption.length-1;i>=0;i--){if(aOption[i].selected){oBox.appendChild(aOption[i]);break;}}}//向右列移动所有选中元素oBtnSelected.onclick=function(){var aOption = oBox.getElementsByTagName("option");for(var i = aOption.length-1;i>=0;i--){if(aOption[i].selected){oBox1.appendChild(aOption[i]);}}}//向左列移动所有选中元素oBtnSelected1.onclick=function(){var aOption = oBox1.getElementsByTagName("option");for(var i = aOption.length-1;i>=0;i--){if(aOption[i].selected){oBox.appendChild(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 /><div id="container"><select id="box" multiple="multiple" size="10"> <option value="江苏">江苏</option> <option value="河北">河北</option> <option value="内蒙古">内蒙古</option> <option value="福建">福建</option> <option value="江西">江西</option> <option value="浙江">浙江</option> <option value="宁县">宁夏</option> <option value="青藏">青藏</option> <option value="四川">四川</option> <option value="北京">北京</option> <option value="上海">上海</option></select><div id="control"><input type="button" id="btn_one" value=">" title="移动一个选中到右侧" /><br /><input type="button" id="btn_selected" value=">>" title="移动所有选中到右侧" /><br /><input type="button" id="btn_all" value=">>>" title="移动所有到右侧" /><br /><input type="button" id="btn_one1" value="<" title="移动一个选中到左侧" /><br /><input type="button" id="btn_selected1" value="<<" title="移动所有选中到左侧" /><br /><input type="button" id="btn_all1" value="<<<" title="移动所有到左侧" /><br /></div><select id="box1" multiple="multiple" size="10"></select></div></body></html>
列表框元素的操作
0 0