js左移右移的例子

 

<html>
    <head>
        <title>
            index
        </title>
    <head>
    <body>
        <form name="form1" id="form1" method="post" action="">
            同步进行：
            <input type="text" name="textfiled" id="txt" 
            onkeyup="javascript:document.getElementById('label_1').innerText = this.value"/> 
            &nbsp;
            这是同步的标签:<label id = "label_1"></label>
            <br/>
            <br/>
            只允许输入数字（QQ的验证）：
            <input type="text" id="txtQQ" name="textfield"  onkeypress="return aa()"/>
            <br/>
            <br/>
            <label>*****************************************************************</label>
            <br/>
            <br/>
            <table>
            <tr>
            <td>
            <input type="checkbox" id="checkbox1" value = "大类" name="checkbox1"/>大类
            <br/>
            <input type="checkbox" id="checkbox1" value = "中类" name="checkbox1"/>中类
            <br/>
            <input type="checkbox" id="checkbox1" value = "小类" name="checkbox1"/>小类
            <br/>
            </td>
            <td>
            <input type="button" id="check_1" name="check_1"  value="提交"onclick="mycheck_1()"/>
            </td>
            <td>
            <textarea rows="9" cols="25" id="textarea_1" name="textarea_1"></textarea>
            <br/>
            </td>
            </tr>
            </table>
            <label>*****************************************************************</label>
            <br/>
            <br/>
            <label><input type="radio" id="radio1" name="radiogroup" value="男"/>男</label>
            <label><input type="radio" id="radio2" name="radiogroup" value="女"/>女</label>
            &nbsp;
            <input type="button" id="radio_1" name="radio_1"  value="提交"onclick="myRadio_1()"/>
            <br/>
            <br/>
            <label><input type="radio" id="radio1" name="radiogroup_1" value="东"/>东</label>
            <label><input type="radio" id="radio2" name="radiogroup_1" value="西"/>西</label>
            <label><input type="radio" id="radio1" name="radiogroup_1" value="南"/>南</label>
            <label><input type="radio" id="radio2" name="radiogroup_1" value="北"/>北<label>
            <label><input type="radio" id="radio1" name="radiogroup_1" value="中"/>中<label>
            &nbsp;
            <input type="button" id="radio_2" name="radio_2"  value="提交"onclick="myRadio_2()"/>
            &nbsp;
            <input type="text" name="textfiled" id="txtRadio" value=""/>
            &nbsp;
            <br/>
            <br/>
            <label>*****************************************************************</label>
            <br/>
            <br/>
            <!--select 单选框 Begin-->
            <label>select 单选框</label>
            <br/>
            <select name="select" size="1"id="danXuan" onchange="changeText()">
                <option value="">--请选择--</option>
                <option value="我的秘书">我的秘书</option>
                <option value="我的工作台">我的工作台</option>
                <option value="项目管理">项目管理</option>
                <option value="计划管理">计划管理</option>
                <option value="企业管理">企业管理</option>
            </select>
            &nbsp;
            <input type="text" name="textfiled" id="select_danxuan" value=""/>
            <!--select 单选框 Begin-->
            <br/>
            <br/>
            <label>*****************************************************************</label>
            <br/>
            <label>select 多选框</label>
            <table>
                <tr>
                    <td>
                    <!--select 多选框b1  Begin-->
                    <select size="2"  multiple  id="b1" style="height:151px; width:180px;">
                        <option value="我的秘书">我的秘书</option>
                        <option value="我的工作台">我的工作台</option>
                        <option value="项目管理">项目管理</option>
                        <option value="计划管理"> 计划管理</option>
                        <option value="企业管理">企业管理</option>
                    </select>
                    </td>
                    <!--select 多选框b1  end-->
                    
                    <td>
                    <!--select 多选框 button Begin-->
                    <table>
                        <tr align="center"><input type="button"  value = " >  " onclick="myRight()"/></tr>
                        <tr align="center"><input type="button"  value = " >> " onclick="myRightAll()"/></tr>
                        <tr align="center"><input type="button"  value = " <  " onclick="myleft()"/></tr>
                        <tr align="center"><input type="button"  value = " << " onclick="myleftAll()"/></tr>
                        <tr align="center"><input type="button"  value = " ↑ " onclick="myup()"/></tr>
                        <tr align="center"><input type="button"  value = " ↓ " onclick="mydown()"/></tr>
                    </table>
                    <!--select 多选框 button end-->
                    </td>
                
                    <td>
                    <!--另一个select 多选框b2 Begin-->
                    <select size="2" multiple  id="b2" style="height:151px; width:180px;">
                    </select>
                    <!--另一个select 多选框b2  end-->
                    </td>
                    <td>
                        <input type="button" id="select_duoxuan" name="select_duoxuan" value="确定" onclick="myselect_duoxuan()">
                    </td>
                    <td>
                        <textarea rows="9" cols="25" id="textarea" name="textarea"></textarea>
                    </td>
                <tr>
            </table>
            <br/>            
        </form>
        
    </body>
</html>
<SCRIPT LANGUAGE="JavaScript">
<!--
//***select begin *************************************************************************************************************************************
function myRight()//将select框中选中的列，移到另一个select框中
{
    var select_b1 = document.getElementById("b1");
    var select_b2 = document.getElementById("b2");
    
    var count = 0;
    for(i = 0; i < select_b1.length; i ++)
    {   count = 0;
        if(select_b1.options[i].selected)
        {
            var temp = document.createElement("option");
            temp.value = select_b1[i].value;
            temp.text = select_b1[i].value;
            if(select_b2.length == 0)
            {
                select_b2.add(temp);
            }
            else
            {
                for(j = 0; j < select_b2.length; j ++)
                {
                    if(select_b2.options[j].value == temp.value)
                    {
                        count++;
                    }
                }
                if(count == 0)
                {
                    select_b2.add(temp);
                }
                
            }    
        }
    }
}
function myRightAll()//将select框中选中的列，全部移到另一个select框中
    {
        var select_b1 = document.getElementById("b1");
        var select_b2 = document.getElementById("b2");
        for(i = select_b2.length; i >= 0; i --)
        {    
            select_b2.remove([i]);
        }
        if(select_b2.length == 0)
        {
            for(i = 0; i < select_b1.length; i ++)
            {
                var temp = document.createElement("option");
                temp.value = select_b1[i].value;
                temp.text = select_b1[i].value;
                
                select_b2.add(temp);
            }
        }

    }
    function myleft()//将select框中选中的列删除
    {   
        var select_b2 = document.getElementById("b2");
        var tmp = select_b2.length;
        for(i = 0; i < select_b2.length; i ++)
        {   //alert(select_b2.length);
            if(select_b2.options[i].selected)
            {   //alert(i);
                select_b2.remove([i]);
                i--;
            }
            
        }
        document.getElementById("textarea").value="";
        myselect_duoxuan();
    }
    function myleftAll()//全部删除将select框中的列
    {
        var select_b1 = document.getElementById("b1");
        var select_b2 = document.getElementById("b2");
        for(i = select_b2.length; i >= 0; i --)
        {

            select_b2.remove([i]);
        }
        document.getElementById("textarea").value="";
        myselect_duoxuan();
    }
    function myup()//向上移动
    {      
        var select_b2 = document.getElementById("b2");
        var selectedIndex = select_b2.selectedIndex;
        var count = 0;
        if(select_b2.length != 0)
        {
            for(i = 0; i < select_b2.length; i ++)
            {   
                if(selectedIndex != 0)
                {
                    if(select_b2.options[i].selected)
                    {
                        count ++;
                    }
                }
                else
                {
                    return;
                }
            }
            if(count != 0)
            {
                if(selectedIndex <= select_b2.length-1)
                {
                    var temp = document.createElement("option");
                    temp.text = select_b2.options[select_b2.selectedIndex].text;
                    temp.value = select_b2.options[select_b2.selectedIndex].value;
                    
                    select_b2.options[select_b2.selectedIndex].text = select_b2.options[select_b2.selectedIndex - 1].text;
                    select_b2.options[select_b2.selectedIndex].value = select_b2.options[select_b2.selectedIndex - 1].value;
                    
                    select_b2.options[select_b2.selectedIndex - 1].text = temp.text;
                    select_b2.options[select_b2.selectedIndex - 1].value = temp.value;
                    select_b2.selectedIndex = select_b2.selectedIndex - 1;
                }
            }
            else
            {
                alert("没有选中一个！");
            }
        }
        else
        {
            alert("没有数据");
        }
    }
    function mydown()//向下移动
    {
        var select_b2 = document.getElementById("b2");
        var selectedIndex = select_b2.selectedIndex;
        var count = 0;
        if(select_b2.length != 0)
        {
            for(i = 0; i < select_b2.length; i ++)
            {   
                if(selectedIndex != select_b2.length-1)
                {
                    if(select_b2.options[i].selected)
                    {
                        count ++;
                    }
                }
                else
                {
                    return;
                }
            }
            if(count != 0)
            {
                if(selectedIndex <= select_b2.length-1)
                {
                    var temp = document.createElement("option");
                    temp.text = select_b2.options[select_b2.selectedIndex].text;
                    temp.value = select_b2.options[select_b2.selectedIndex].value;
                    
                    select_b2.options[select_b2.selectedIndex].text = select_b2.options[select_b2.selectedIndex  + 1].text;
                    select_b2.options[select_b2.selectedIndex].value = select_b2.options[select_b2.selectedIndex + 1].value;
                    
                    select_b2.options[select_b2.selectedIndex + 1].text = temp.text;
                    select_b2.options[select_b2.selectedIndex + 1].value = temp.value;
                    select_b2.selectedIndex = select_b2.selectedIndex + 1;
                }
            }
            else
            {
                alert("没有选中一个！");
            }
        }
        else
        {
            alert("没有数据");
        }
    }
//***select end *************************************************************************************************************************************
function aa()//屏蔽输入字符
{   
    var keycode = event.keyCode;
    if(!(keycode>=48&&keycode<=57))
    {
        return false;
    }
}
//******select 单选框 Begin***********************************************************************************************************************
function changeText()
{
    var select_DanXuan = document.getElementById("danXuan");
    //所有的信息   select_DanXuan.innerText；
     alert(select_DanXuan.value);
     document.getElementById("select_danxuan").value = select_DanXuan.value;
}
//*******select 单选框 End**********************************************************************************************************************

function myRadio_1()//单选按纽
{
    var radio1 = document.getElementById("radio1");
    var radio2 = document.getElementById("radio2");
    if(radio1.checked)
    {
        alert(radio1.value);
    }
    if(radio2.checked)
    {
        alert(radio2.value);
    }
}
function myRadio_2()
{
    for(i = 0; i < document.all("radiogroup_1").length; i ++)
    {
        if(document.all("radiogroup_1")[i].checked)
        {
            alert(document.all("radiogroup_1")[i].value);
            document.getElementById("txtRadio").value = document.all("radiogroup_1")[i].value;
            return;
        }
    }
}
//document.getElementById("cap").focus(); 光标定位
function myselect_duoxuan()
{   
    var select_b2 = document.getElementById("b2");

    if(select_b2.length != 0)
    {
        for(i = 0; i < select_b2.length; i ++)
        {
            //alert(select_b2.options[i].value);
            document.getElementById("textarea").value += select_b2.options[i].value+"\n";
            
        }
        return true;
    }else{
        alert("左边的不能为空！");
        return false;
    }
    
}
function mycheck_1()
{
    for(i = 0; i < document.all("radiogroup_1").length; i ++)
    {
        if(document.all("checkbox1")[i].checked)
        {
            alert(document.all("checkbox1")[i].value);
            document.getElementById("textarea_1").value += document.all("checkbox1")[i].value+"\n";
        }
    }
}
//-->
</SCRIPT>
posted on 2006-11-12 13:45  秦岭过客  阅读(2500)  评论(0)    收藏  举报
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3