08-DOM操作多选下拉列表

最新推荐文章于 2021-03-21 14:47:01 发布

会编程的阿强

最新推荐文章于 2021-03-21 14:47:01 发布

阅读量401

点赞数

分类专栏： JQuery和Ajax

本文链接：https://blog.csdn.net/shuangrenyu1234/article/details/48979905

版权

JQuery和Ajax 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <select name="first" size="10" multiple="multiple" id="first">
                        <option value="选项1">选项1</option>
                        <option value="选项2">选项2</option>
                        <option value="选项3">选项3</option>
                        <option value="选项4">选项4</option>
                        <option value="选项5">选项5</option>
                        <option value="选项6">选项6</option>
                        <option value="选项8">选项8</option>
                    </select>
                </td>
                <td width="69" valign="middle">
                    <input name="add" id="add" type="button" value="-->"/><input name="add_all" id="add_all" type="button" value="==>"/><input name="remove" id="remove" type="button" value="<--"/><input name="remove_all" id="remove_all" type="button" value="<=="/>
                </td>
                <td width="127" align="left">
                    <select name="second" size="10" multiple="multiple" id="second">
                        <option value="选项9">选项9</option>
                    </select>
                </td>
            </tr>
        </table>
    </body>
    <script type="text/javascript">
        window.onload = function(){
            //选中的从左端移到右端
            document.getElementById("add").onclick = function(){
                //获取左边
                var firstElement = document.getElementById("first");
                //获取option
                var optionElements = firstElement.getElementsByTagName("option");
                var len = optionElements.length;
                //获取右边
                var secondElement = document.getElementById("second");
                //遍历option
				for(var i=0;i<len;i++){
					var optionElement=optionElements[i];
					
					/**
					 * selectedIndex表示当前选中的option的索引值，从0开始
					 * 如果没有被选中的，selectedIndex=-1
					 * 如果有多个被选中，selectedIndex的值永远是第一个被选中的值
					 * javascript的数组是动态的数组，索引值也在变
					 */
					alert(firstElement.selectedIndex);
					if(firstElement.selectedIndex!=-1){
						secondElement.appendChild(optionElements[firstElement.selectedIndex]);
					}
				}
            }
			
			//全部从左端移到右端,就是移动第0个
//			document.getElementById("add_all").οnclick=function(){
//				var firstElement=document.getElementById("first");
//				//获取option
//				var optionElements=firstElement.getElementsByTagName("option");
//				//alert(len);
//				//获取右边
//				var secondElement=document.getElementById("second");
//				for(var i=0;i<len;i++){
//					secondElement.appendChild(optionElements[0]);
//				}
//			}
			//简化的
			document.getElementById("add_all").οnclick=function(){
				var firstElement=document.getElementById("first");
				//获取option
				var len=firstElement.length;
				//获取右边
				var secondElement=document.getElementById("second");
				for(var i=0;i<len;i++){
					secondElement.appendChild(firstElement[0]);
				}
			}		
			
			//双击的从左端移动到右端
//			document.getElementById("first").οndblclick=function(){
//				var  firstElement=document.getElementById("first");
//				var optionElements=firstElement.getElementsByTagName("option");
//				var secondElement=document.getElementById("second");
//				for(var i=0;i<optionElements.length;i++){
//					secondElement.appendChild(optionElements[firstElement.selectedIndex]);						
//				}
//			}


			//优化的
			document.getElementById("first").οndblclick=function(){
				var secondElement=document.getElementById("second");
				secondElement.appendChild(this[this.selectedIndex]);
			}
			//选中的从右端移到左端
			document.getElementById("remove").οnclick=function(){
				 //获取右边
                var secondElement = document.getElementById("second");
                //获取option
                var optionElements = secondElement.getElementsByTagName("option");
                var len = optionElements.length;
                //获取左边
                var firstElement = document.getElementById("first");
                //遍历option
				for(var i=0;i<len;i++){
					if(secondElement.selectedIndex!=-1){
						firstElement.appendChild(optionElements[secondElement.selectedIndex]);
					}
				}
			}
			//简化的（全部有右边移到左边）
			document.getElementById("remove_all").οnclick=function(){
				var secondElement=document.getElementById("second");
				//获取option
				var len=secondElement.length;
				//获取右边
				var firstElement=document.getElementById("first");
				for(var i=0;i<len;i++){
					firstElement.appendChild(secondElement[0]);
				}
			}		
			//双击从右移动到左边
			//优化的
			document.getElementById("second").οndblclick=function(){
				var firstElement=document.getElementById("first");
				firstElement.appendChild(this[this.selectedIndex]);
			}
			
        }
    </script>
</html>

会编程的阿强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
08-DOM操作多选下拉列表

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8" %> Insert title here
复制链接

扫一扫