div隐藏显示及select拉升效果

最新推荐文章于 2024-10-19 16:42:00 发布

置顶 draglonglong

最新推荐文章于 2024-10-19 16:42:00 发布

阅读量523

点赞数

文章标签： div function button input null border

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/draglonglong/article/details/5797513

版权

<script language="javascript">
    var MainSel = null, SlaveSel = null;
    var Item_org = new Array();

    window.οnlοad=function(){
        MainSel = document.getElementById("allPerson");
        SlaveSel = document.getElementById("result");
    }

    //全部添加
    function DoAddAll(){
        for(var i = 0; i <MainSel.length;i++){
            var selectvalue = MainSel.options[i];
            SlaveSel.appendChild(selectvalue);
            i--;
        }
        MainSel.length=0;
    }
    //全部移除
    function DoDelAll(){
        for(var i=0;i<SlaveSel.length;i++){
            var selectvalue = SlaveSel.options[i];
            MainSel.appendChild(selectvalue);
            i--;
        }
        SlaveSel.length=0;
    }
    //添加函数
    function DoAdd(){
        var this_sel = null;
        for(var i=0;i<MainSel.length;i++){
            this_sel = MainSel.options[i];
            if(this_sel.selected){
                SlaveSel.appendChild(this_sel);
                i--;
            }
        }
        sort_Main(SlaveSel);
    }
    //移除函数
    function DoDel(){
        var this_sel = null;
        for(var i=0;i<SlaveSel.length;i++){
            this_sel = SlaveSel.options[i];
            if(this_sel.selected){
                MainSel.appendChild(this_sel);
                i--;
            }
        }
        sort_Main(MainSel);
    }
    //选择函数
    function sort_Main(the_Sel){
        var this_sel = null;
        for(var i=0;i<Item_org.length;i++){
            for(var j=0;j<the_Sel.options.length;j++){
                this_sel = the_Sel.options[j];
                if(this_sel.value==Item_org[i][0] && this_sel.text==Item_org[i][1]){
                    the_Sel.appendChild(this_sel);
            }
        }
    }
    }
    //这个函数目前有点小缺陷，在火狐下不行正常运行，其他浏览器好像都行
    function showContent(e, v_select)
    {
        // 隐藏所有div，条件是lang属性值为content
        var divs=document.getElementsByTagName("div");
        for(var i=0;i<divs.length;i++){
        if(divs[i].lang=="content")
            divs[i].style.display="none";
        }
        //显示当前传递进来的div数据
        e.style.display="block";
        // 获取当前div下的select选项值
        MainSel = document.getElementById(v_select.id);
    }
</script>
<body>
<table width="80%" border="0" align="center">
            <tr>
                <td width="269" align="center">
                    <div οnclick="showContent(this.nextSibling, document.getElementById('allPerson'))">
                        test1
                    </div>
                    <div lang="content">
                        <select name="select" size="15" id="allPerson" style="width: 269px">
                                <option value=”1”>
                                    1
                                </option>
<option value=”2”>
                                    2
                                </option>
                                <option value=”3”>
                                    3
                                </option>
                        </select>
                    </div>
                    <div οnclick="showContent(this.nextSibling, document.getElementById('allDept'))">
                        test2
                    </div>
                    <div style="display:none" lang="content">
                        <select name="select" size="15" id="allDept" style="width: 269px">
                            <option value=”4”>
                                    4
                                </option>
<option value=”5”>
                                    5
                                </option>
                                <option value=”6”>
                                    6
                                </option>
                        </select>
                    </div>
                    <div οnclick="showContent(this.nextSibling, document.getElementById('test'))">
                        test3
                    </div>
                    <div style="display:none" lang="content">
                        <select name="select" size="15" id="test" style="width: 269px">
                            <option value=”1”>
                                    7
                                </option>
<option value=”2”>
                                    8
                                </option>
                                <option value=”3”>
                                    9
                                </option>
                        </select>
                    </div>
                </td>
                <td align="center" valign="middle">
                    <table width="99%" border="0">
                        <tr>
                            <td align="center">
                                <input name="add" type="button" onClick="DoAdd()"
                                    value=" 添加 " style="width: 80px" />
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                <input type="button" name="delete" value="移除" onClick="DoDel()"
                                    style="width: 80px" />
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                <input type="button" name="addAll" value="添加全部"
                                    onClick="DoAddAll()" style="width: 80px" />
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                <input type="button" name="deleteall" value="移除全部"
                                    onClick="DoDelAll()" style="width: 80px" />
                            </td>
                        </tr>
                    </table>
                </td>
                <td width="232" align="center">
                    <select name="pms_code" size="15" multiple id="result"
                        style="width: 269px">
                    </select>
                </td>
            </tr>
        </table>
</body>

评论 5

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。