JavaScript 下拉列表左右选择案例

╰半夏微凉° 2021-06-24 16:10 467阅读 0赞

## 功能描述 ##

网页设置两个复选框，分别置入一些选项。  
下面分别置入两个按钮，点击左边的按钮可以把左边选中的选项移动至右边。右边同理。  
如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70]

## 分析 ##

*  HTML页面设计
    
        <select name="left" id="left" multiple="multiple" size="7" style="width: 100px;height: 100px;">
        	<option value="">洪世贤</option>
        	<option value="">林品如</option>
        	<option value="">艾莉</option>
        	<option value="">唐三藏</option>
        	<option value="">孙悟空</option>
        </select>
        <select name="right" id="right" multiple="multiple" size="7" style="width: 100px;height: 100px;">
        	<option value="">洪尚恩</option>
        	<option value="">洪国荣</option>
        	<option value="">猪八戒</option>
        	<option value="">沙和尚</option>
        </select>
 *  按钮绑定事件。
    
        <input type="button" value="→" onclick="addToRight()" style="width: 100px;" />
        <input type="button" value="←" onclick="addToLeft()" style="width: 100px;" />
 *  JavaScript函数思路：
    
    1.  获取左边的下拉列表对象。
        
            var left = document.getElementById("left");
    2.  读取左边的选项元素至一个集合。  
        就是获取下拉列表的子节点，使用`getElementsByTagName()`方法。
        
            var leftop = left.getElementsByTagName("option");
    3.  获取右边的下拉列表对象。
        
            var right = document.getElementById("right");
    4.  遍历左边的选项元素，如果是选中的状态，就把它添加到右边。  
        **关键代码**：  
        **判断选中状态**：使用`selected`属性，true为选中，false反之。  
        **添加到右边**：使用`appendChild()`方法。  
        值得注意的是，每次遍历，集合的长度都会减少，而i的值会依次增加，就导致了每取一个就会跳过一个。为了避免这种情况，我们在判断真执行的时候使用i–来规避。
        
            for(var i = 0; i < rightop.length; i++) { 
            				if(rightop[i].selected) { 
            					left.appendChild(rightop[i]);
            					i--;
            				}
            			}

## 代码 ##

<body>
    	<select name="left" id="left" multiple="multiple" size="7" style="width: 100px;height: 100px;">
    		<option value="">洪世贤</option>
    		<option value="">林品如</option>
    		<option value="">艾莉</option>
    		<option value="">唐三藏</option>
    		<option value="">孙悟空</option>
    	</select>
    	<select name="right" id="right" multiple="multiple" size="7" style="width: 100px;height: 100px;">
    		<option value="">洪尚恩</option>
    		<option value="">洪国荣</option>
    		<option value="">猪八戒</option>
    		<option value="">沙和尚</option>
    	</select>
    	<br />
    	<input type="button" value="→" onclick="addToRight()" style="width: 100px;" />
    	<input type="button" value="←" onclick="addToLeft()" style="width: 100px;" />
    	<script type="text/javascript"> function addToRight() { var left = document.getElementById("left"); var right = document.getElementById("right"); var leftop = left.getElementsByTagName("option"); for(var i = 0; i < leftop.length; i++) { if(leftop[i].selected) { right.appendChild(leftop[i]); i--; } } } function addToLeft() { var left = document.getElementById("left"); var right = document.getElementById("right"); var rightop = right.getElementsByTagName("option"); for(var i = 0; i < rightop.length; i++) { if(rightop[i].selected) { left.appendChild(rightop[i]); i--; } } } </script>
    </body>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70]: /images/20210615/c3df805428dc4d78a9f6d4b68d3b519e.png