基於JavaScript實現控制下拉列表

需求分析
在我們的分類管理中,我們要能夠去修改我們的分類信息,當我們一點修改的時候,跳轉到一個可以編輯的頁面,這裡面能夠修改分類的名稱,分類的描述,以及分類的商品
技術分析
ondblclick="selectOne()"：雙擊事件
select標籤的屬性multiple="multiple"：
代碼實現

<!-- 步驟分析 
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>