左右移动

最新推荐文章于 2021-06-16 03:07:42 发布

trainhui

最新推荐文章于 2021-06-16 03:07:42 发布

阅读量245

点赞数

分类专栏： demo

本文链接：https://blog.csdn.net/trainhui/article/details/98474385

版权

demo 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			select{
			     width: 100px;
				overflow: scroll;
			}
			#left{
			    margin-left:168px;
                margin-top:140px;
			}
			#right{
				    margin-left: 420px;
                    margin-top: -819px;
			}
			table{
				margin-left:12px;
                 margin-top:140px;
			}
			#btnD{
				margin-left:282px;
                 margin-top:-310px;
			}
		</style>
	</head>
	<body>
		          <div>
		          	    <select id="leftSelect" size="10" onchange="" multiple="multiple" >
						<option value="a">a</option>
						<option value="b">b</option>
						<option value="c">c</option>
						<option value="d">d</option>
						<option value="e">e</option>
						<option value="f">f</option>
						<option value="g">g</option>
						<option value="h">h</option>
						<option value="i">i</option>
						<option value="j">j</option>
						<option value="k">k</option>
						<option value="l">l</option>
			           </select>
		          </div>
			
			      <div id="btnD">
			      	 <table>
			      	<tr>
			      		<td><input type="button" onclick="selectleftOne()"  value=">" /></td>
			      	</tr>
			      	<tr>
			      		<td>  <input type="button" onclick="selectLeftSeval()" value=">>" /></td>
			      	</tr>
			      	<tr>
			      		<td> <input type="button" value=">>>" onclick="selectLeftAll()"/></td>
			      	</tr>
			      	 	<tr>
			      		<td><input type="button" onclick="selectRightOne()" value="<" /></td>
			      	</tr>
			      	<tr>
			      		<td>  <input type="button" onclick="selectReftSeval()" value="<<" /></td>
			      	</tr>
			      	<tr>
			      		<td> <input type="button"  onclick="selectReftAll()" value="<<<" /></td>
			      	</tr>
			         </table>
			      </div>
	 		      <div id="rightSelect">
	 		      	 <select id="right" size="10" multiple="multiple">
					
			          </select>
	 		      </div>
	 		      <script type="text/javascript">
	 		      	  var options=document.getElementsByTagName("option");//公用的                 
                      var leftSelect=document.getElementById("leftSelect");
                      var right=document.getElementById("right")//右边的节点
                       function selectleftOne(){

                          for(var i=0;i<options.length;i++){
                          	 if(leftSelect.options[i].selected==true){
									right.appendChild(leftSelect.options[i]);
									 console.log(right.length);
									return;
                          	 }
                          }
                       }
                      
                      function selectRightOne(){
                      	for(var i=0;i<right.options.length;i++){
                      		if(right.options[i].selected==true){
                      			leftSelect.appendChild(right.options[i]);
                      		}
                      	}
                      }
                      //从左边移除多个
                      function selectLeftSeval(){
//         console.log("ceshi");
                      
                      	for(var i=0;i<leftSelect.length;i++){
                      		if(leftSelect.options[i].selected==true){
                      			right.appendChild(leftSelect.options[i]);                     			
                      		}
                      	}
                      }
                     //从右边移除多个
                             function selectReftSeval(){
                      
                      	for(var i=0;i<right.length;i++){
                      		if(right.options[i].selected==true){
                      			leftSelect.appendChild(right.options[i]);                     			
                      		}
                      	}
                      } 
                      //从左边移除所有
                      function selectLeftAll(){
//                    	console.log("ceshi");
                     
			       	  	for(var i=0;;){                     	
                      	   right.appendChild(leftSelect.options[i]);                     			                 		
                     	 }
                      }
                           //从右边移除所有
                      function selectReftAll(){
//                    	console.log("ceshi");                    
			       	  	for(var i=0;;){                     	
                      	   leftSelect.appendChild(right.options[i]);                     			                 		
                     	 }
                      }
	 		      </script>
			     
	</body>
</html>

trainhui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
左右移动

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> select{ width: 100px; overflow: scroll; ...
复制链接

扫一扫

专栏目录