RT
类似于选择用户的形式,也不知道是不是textare,请教大虾如何做?
------解决方案--------------------
左右select选择框
- HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <INPUT TYPE="text" id="data" style="width:700px;height:50px" value="王立,李平,张立,冯立,立为,张明,王一,李国,平民,王与" readonly> <TABLE> <TR> <TD colspan="3"> <INPUT TYPE="text" NAME="tt" onkeyup="changeValue(this.value)"> </TD> </TR> <TR> <TD> <SELECT NAME="" size="10" style="width:150px" id="s1" ondblclick="changePosition('1')" > </SELECT> </TD> <TD> <input type="button" value=">>" id="b1" onclick="changePosition('1')"/><br/> <input type="button" value="<<" id="b2" onclick="changePosition('2')"/><br/> <input type="button" value=">>>>" id="b1" onclick="changeAll('1')"/><br/> <input type="button" value="<<<<" id="b2" onclick="changeAll('2')"/><br/> </TD> <TD> <SELECT NAME="" size="10" style="width:150px" id="s2" ondblclick="changePosition('2')" > </SELECT> </TD> </TR> </TABLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var s1 = document.getElementById("s1");//左面的select var s2 = document.getElementById("s2");//右面的select /** ** z=1时,从左到右;z=2时,从右到左 **/ function changePosition(z){ var o1 = s1.options; if(z=="2"){ o1 = s2.options; } for(var i=0;i<o1.length;i++){ if(o1[i].selected){ var newOption = document.createElement("option"); newOption.value = o1[i].value; newOption.innerHTML = o1[i].innerHTML; if(z=="2"){ s1.appendChild(newOption); }else{ s2.appendChild(newOption); } o1[i]=null; } } } /** ** z=1时,从左到右;z=2时,从右到左 **/ function changeAll(z){ var o1 = s1.options; if(z=="2"){ o1 = s2.options; } var len = o1.length; for(var i=0;i<len;i++){ var oldOption = o1[i]; var newOption = document.createElement("option"); newOption.value = oldOption.value; newOption.innerHTML = oldOption.innerHTML; if(z=="2"){ s1.appendChild(newOption); }else{ s2.appendChild(newOption); } } if(z=="2"){ s2.innerHTML = ""; }else{ s1.innerHTML = ""; } } /** ** 当在输入框输入数据时,左面的select会根据输入值比对信息,显示含有输入值的数据 **/ function changeValue(z){ var s1 = document.getElementById("s1");//左面的select var s2 = document.getElementById("s2");//右面的select var o2 = s2.options; var data = document.getElementById("data").value;//存放数据的输入框(如果要用到项目中,这里一定要改) var ds = data.split(",");//数据用","隔开 //如果输入值为空 if(z==""){ s1.innerHTML = ""; for(var i=0;i<ds.length;i++){ var _va = 0;//用于比较左右select中的值是否相等 var va = ds[i]; //循环右面的select中的value,右面有的option左面就不应该有了 for(var j=0;j<o2.length;j++){ var _o2 = o2[j].innerHTML; if(va == _o2){ _va = 1; break; } } //右面的option没有的,左面有 if( _va == 0 ){ var newOption = document.createElement("option"); newOption.value = va; newOption.innerHTML = va; s1.appendChild(newOption); } } }else{//输入值不为空 s1.innerHTML = ""; for(var i=0;i<ds.length;i++){ var _va = 0;//用于比较左右select中的值是否相等 var va = ds[i]; //左面的select必须包含输入值 if(va.indexOf(z) != -1){ //循环右面的select中的value,右面有的option左面就不应该有了 for(var j=0;j<o2.length;j++){ var _o2 = o2[j].innerHTML; if(va == _o2){ _va = 1; break; } } //右面的option没有的,左面有 if( _va == 0 ){ var newOption = document.createElement("option"); newOption.value = va; newOption.innerHTML = va; s1.appendChild(newOption); } } } } } //初始化数据 function initData(){ var s1 = document.getElementById("s1"); var data = document.getElementById("data").value; var ds = data.split(","); for(var i=0;i<ds.length;i++){ var va = ds[i]; var newOption = document.createElement("option"); newOption.value = va; newOption.innerHTML = va; s1.appendChild(newOption); } } initData(); //--> </SCRIPT> </BODY> </HTML>