html+js 左移右移

最新推荐文章于 2022-11-17 23:30:33 发布

风清扬猿君

最新推荐文章于 2022-11-17 23:30:33 发布

阅读量2.7k

点赞数 1

分类专栏： JAVASCRIPT

JAVASCRIPT 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
    <head>
        <title>
            index
        </title>
    <head>
    <body>
        <form name="form1" id="form1" method="post" action="">
            <label>select 多选框</label>
            <table>
                <tr>
                    <td>
                    
                    <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>
                    

                    <td>
                    
                    <table>
                        <tr align="center"><input type="button" value = " > " οnclick="myRight()"/></tr>
                        <tr align="center"><input type="button" value = " >> " οnclick="myRightAll()"/></tr>
                        <tr align="center"><input type="button" value = " < " οnclick="myleft()"/></tr>
                        <tr align="center"><input type="button" value = " << " οnclick="myleftAll()"/></tr>
                        <tr align="center"><input type="button" value = " ↑ " οnclick="myup()"/></tr>
                        <tr align="center"><input type="button" value = " ↓ " οnclick="mydown()"/></tr>
                    </table>
                    </td>
                    <td>
                    <select size="2" multiple id="b2" style="height:151px; width:180px;">
                    </select>
                    </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--;
            }

        }
    }
    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]);
        }
    }
    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("没有数据");
        }
    }
</SCRIPT>