读书人

2个textare,左边内容内容通过按钮可以

发布时间: 2012-05-14 15:24:34 作者: rapoo

2个textare,左边内容内容通过按钮可以提交到右边的textare,这个如何做
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> 

读书人网 >JavaScript

热点推荐