歡迎您光臨本站 註冊首頁

JS控制下拉列表左右選擇實例代碼

←手機掃碼閱讀     月球人 @ 2020-05-11 , reply:0

在本篇內容中小編給各位分享的是關於如何使用JS控制下拉列表左右選擇的實例代碼,需要的朋友們可以參考下。
使用JS控制下拉列表左右選擇
需求分析
在我們的分類管理中,我們要能夠去修改我們的分類信息,當我們一點修改的時候,跳轉到一個可以編輯的頁面,這裡面能夠修改分類的名稱,分類的描述,以及分類的商品
技術分析
ondblclick="selectOne()":雙擊事件
select標籤的屬性multiple="multiple":
代碼實現

<meta charset="UTF-8"/>

<title></title><!-- 步驟分析 1. 確定事件: 點擊事件 :onclick事件 2. 事件要觸發函數 selectOne 3. selectOne要做一些操作 (將左邊選中的元素移動到右邊的select中) 1. 獲取左邊Select中被選中的元素 2. 將選中的元素添加到右邊的Select中就可以 --><script>function selectOne(){ //1. 獲取左邊Select中被選中的元素 var leftSelect = document.getElementById("leftSelect"); var options = leftSelect.options; //找到右側的Select var rightSelect = document.getElementById("rightSelect"); //遍歷找出被選中的option for(var i=0; i < options.length; i++){ var option1 = options[i]; if(option1.selected){ //2. 將選中的元素添加到右邊的Select中就可以 rightSelect.appendChild(option1); } } } //將左邊所有的商品移動到右邊 function selectAll(){ //1. 獲取左邊Select中被選中的元素 var leftSelect = document.getElementById("leftSelect"); var options = leftSelect.options; //找到右側的Select var rightSelect = document.getElementById("rightSelect"); //遍歷找出被選中的option for(var i=options.length - 1; i >=0; i--){ var option1 = options[i]; rightSelect.appendChild(option1); } }</script>

<table border="1px" width="400px">

    <tbody>

        <tr class="firstRow">

            <td>

                分類名稱

            </td>

            <td>

                <input type="text" value="手機數碼"/>

            </td>

        </tr>

        <tr>

            <td>

                分類描述

            </td>

            <td>

                <input type="text" value="這裡面都是手機數碼"/>

            </td>

        </tr>

        <tr>

            <td>

                分類商品

            </td>

            <td>

                <!--左邊-->

                <p>

                    已有商品<br/> <select multiple="multiple" id="leftSelect" ondblclick="selectOne()"><option>

                        華為

                    </option>

                    <option>

                        小米

                    </option>

                    <option>

                        錘子

                    </option>

                    <option>

                        oppo

                    </option></select><br/> <a href="#" rel="external nofollow" onclick="selectOne()"> &gt;&gt; </a> <br/> <a href="#" rel="external nofollow" onclick="selectAll()"> &gt;&gt;&gt; </a> 

                </p><!--右邊-->

                <p>

                    未有商品<br/> <select multiple="multiple" id="rightSelect"><option>

                        蘋果6

                    </option>

                    <option>

                        腎7

                    </option>

                    <option>

                        諾基亞

                    </option>

                    <option>

                        波導

                    </option></select><br/> <a href="#" rel="external nofollow"> &lt;&lt; </a> <br/> <a href="#" rel="external nofollow"> &lt;&lt;&lt; </a> 

                </p>

            </td>

        </tr>

        <tr>

            <td colspan="2">

                <input type="submit" value="提交"/>

            </td>

        </tr>

    </tbody>

</table>

<p>

    <br/>實例補充:<br/>

</p>

<title>

    JavaScript下拉列表左右選擇

</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/><script type="text/javascript">function chooseToRight() { var op=document.getElementById("s1").getElementsByTagName("option"); var select2=document.getElementById("s2"); var k=op.length; for(var i=0;i<k;i++) { if(op[i].selected==true) { select2.appendChild(op[i]); k--;i--; //這裡要特別注意!!!因為appendChild相當於剪切,所以每次循環之後要執行k--,i-- } } } function chooseToLeft() { var op=document.getElementById("s2").getElementsByTagName("option"); var select2=document.getElementById("s1"); var k=op.length; for(var i=0;i<k;i++) { if(op[i].selected==true) { select2.appendChild(op[i]); k--;i--; } } } function allToLeft() { var op=document.getElementById("s2").getElementsByTagName("option"); var select2=document.getElementById("s1"); var k=op.length; for(var i=0;i<k;i++) { select2.appendChild(op[i]); k--;i--; } } function allToRight() { var op=document.getElementById("s1").getElementsByTagName("option"); var select2=document.getElementById("s2"); var k=op.length; for(var i=0;i<k;i++) { select2.appendChild(op[i]); k--;i--; } } </script>

<p>

    <select id="s1" multiple="multiple" style="width: 120px;height: 150px"><option>

        AAAAAAA

    </option>

    <option>

        BBBBBBB

    </option>

    <option>

        CCCCCCC

    </option>

    <option>

        DDDDDDD

    </option>

    <option>

        EEEEEEE

    </option></select><br/><br/> <input type="button" value="選中添加到右邊" onclick="chooseToRight();"/><br/><br/> <input type="button" value="全部添加到右邊" onclick="allToRight();"/><br/> 

</p>

<p>

    <select id="s2" multiple="multiple" style="width: 120px;height: 150px"><option>

        1111111

    </option>

    <option>

        2222222

    </option>

    <option>

        3333333

    </option>

    <option>

        4444444

    </option>

    <option>

        5555555

    </option></select><br/><br/> <input type="button" value="選中添加到左邊" onclick="chooseToLeft();"/><br/><br/> <input type="button" value="全部添加到左邊" onclick="allToLeft();"/><br/> 





[月球人 ] JS控制下拉列表左右選擇實例代碼已經有275次圍觀

http://coctec.com/docs/javascript/show-post-233777.html