js option 操作

最新推荐文章于 2023-08-04 09:00:58 发布
czhaozhi3758
最新推荐文章于 2023-08-04 09:00:58 发布
阅读量138
点赞数
分类专栏： js基础文章标签： J#
本文链接：https://blog.csdn.net/czhaozhi3758/article/details/83560953
版权
js基础专栏收录该内容
19 篇文章 0 订阅
订阅专栏


<html>
<head>
    <title>option all</title>
</style>
</head>
 <body>
     <table align="center">
       <tr>
         <td>
       <div><b>供选选项</b></div>
       <select size="15" id="selectleft" style="width:150px" multiple>                                 
       <option value="1">Properties 1</option>
       <option value="2">Properties 2</option>
       <option value="3">Properties 3</option>
       <option value="4">Properties 4</option>
       <option value="5">Properties 5</option>
       <option value="6">Properties 6</option>
       <option value="7">Properties 7</option>
       <option value="8">Properties 8</option>                                   
       </select>
         </td>
         <td valign="middle" align="center">

           <input value=" 全部移进 " type="button" id="addto"  onclick="moveInAll()"/><br /><br />

           <input value=" 全部移出 " type="button" id="moveback" onclick="moveOutAll()"/><br /><br />

           <input value=" 选中移进 " type="button" id="moveback" onclick="moveInSelected()"/><br /><br />

           <input value=" 选中移除 " type="button" id="moveback" onclick="moveOutSelected()"/><br /><br />

           <input value=" 选中上移 " type="button" id="moveTop"  onclick="moveUpSelected()"/><br /><br />

           <input value=" 选中下移" type="button" id="moveUp"     onclick="moveDownSelected()"><br /><br />

           <input value=" 移至顶部 " type="button" id="moveDown" onclick="moveToTop()"><br /><br />

           <input value=" 移至底部 " type="button" id="moveBottom" onclick="moveToDown()"/><br />
         </td>
         <td>
           <div><b>已选选项</b></div>
           <select size="15" id="selectright" style="width:150px" multiple>
           </select>
         </td>
       </tr>
     </table>

<script type="text/javascript">
<!--

var selectLeft = document.getElementById("selectleft");
var selectRight = document.getElementById("selectright");

//--全部移进
function moveInAll(){

		var select1All = selectLeft.options;
			for(var i=0;i<select1All.length;i++){
				    var flag=0;
				  	var select2All = selectRight.options;
				  	for(var j=0;j<select2All.length;j++){
				  		if(select1All[i].value==select2All[j].value)flag=1;
				  	}
				  if(flag==0)
					   selectRight.options.add(new Option(select1All[i].text,select1All[i].value)); 
				}
}

//--全部移除
	function moveOutAll(){
		  	/*
		  	 var select2All = selectRight.options;
		  		for(var j=select2All.length-1;j>=0;j--){
				  	selectRight.remove(j);

				 }
				 */
			   	selectRight.options.length=0;

		}


//--移进选中项
	function moveInSelected(){
		    //var selectText = selectLeft.options[selectIndex].text;     
        //var selectValue = selectLeft.options[selectIndex].value;  
		   var select1All = selectLeft.options;
		  	for(var i=0;i<select1All.length;i++){
				    var flag=0;
				  	var select2All = selectRight.options;
				  	for(var j=0;j<select2All.length;j++){
				  		if(select1All[i].value==select2All[j].value)flag=1;
				  	}
				  if(flag==0&&select1All[i].selected){
					    selectRight.options.add(new Option(select1All[i].text,select1All[i].value)); 
					    //selectRight.options[selectRight.options.length] = new Option(select1All[i].text,select1All[i].value,false,false);
					     /* var op = document.createElement("option"); 
                op.value = selectLeft.options[selectLeft.selectedIndex].value; 
                op.text = selectLeft.options[selectLeft.selectedIndex].text; 
                selectRight.options[selectRight.options.length]=op;*/

					  }
			}
	}
	//--移除选中项
	function moveOutSelected(){
		/*
		 var select2All = selectRight.options;
		  		for(var j=select2All.length-1;j>=0;j--){
		  			if(select2All[j].selected)
				  	selectRight.remove(j);
	   }*/
	  /* 
	   var selectIndex = selectRight.options.selectedIndex;
      if(selectIndex!=-1){
           selectRight.options[selectIndex] = null;  //清空选种项,only one
     }
     */

     for(i=selectRight.options.length-1;i>=0;i--){
     	   if(selectRight.options[i].selected)
     	       selectRight.options[i] = null;
     	}
 }

//--选中上移
function moveUpSelected(){   

    var i = selectLeft.options.selectedIndex;  
    //alert(i); 
    var j = i-1;  
    if(i>0){   
        Temp_Text = selectLeft.options[j].text;   
        Temp_ID = selectLeft.options[j].value;   
        selectLeft.options[j].text = selectLeft.options[i].text;   
        selectLeft.options[j].value = selectLeft.options[i].value;  
        selectLeft.options[i].text = Temp_Text;   
        selectLeft.options[i].value = Temp_ID;   
        selectLeft.selectedIndex=j;   
    }  
     /*
      var index = selectLeft.selectedIndex;
      if(index==0) return; 
			var value = selectLeft.options[index-1].value; 
			var text = selectLeft.options[index-1].text; 
			selectLeft.options[index-1].value = selectLeft.options[index].value; 
			selectLeft.options[index-1].text = selectLeft.options[index].text; 
			selectLeft.options[index].value = value; 
			selectLeft.options[index].text = text; 
			selectLeft.options[index].selected = false; 
			selectLeft.options[index-1].selected = true; 
			*/
}   


//--选中下移
function moveDownSelected(){   
    var i = selectLeft.options.selectedIndex;
    if (i != selectLeft.length-1){   
        var j = i+1;   
        if(i < selectLeft.length){   
            Temp_Text = selectLeft.options[j].text;   
            Temp_ID = selectLeft.options[j].value;   
            selectLeft.options[j].text = selectLeft.options[i].text;   
            selectLeft.options[j].value = selectLeft.options[i].value;   
            selectLeft.options[i].text = Temp_Text;   
            selectLeft.options[i].value = Temp_ID;   
            selectLeft.selectedIndex=j;   
        }   
    } 
   /* var index = selectLeft.selectedIndex;
    if(index==(selectLeft.options.length-1)) return; 
			var value =selectLeft.options[index+1].value; 
			var text = selectLeft.options[index+1].text; 
			selectLeft.options[index+1].value = selectLeft.options[index].value; 
			selectLeft.options[index+1].text = selectLeft.options[index].text; 
			selectLeft.options[index].value = value; 
			selectLeft.options[index].text = text; 
			selectLeft.options[index].selected = false; 
			selectLeft.options[index+1].selected = true; 
    */
}   

//--移至顶部
function moveToTop(){   
    var i = selectLeft.options.selectedIndex;
    if(i > 0){   
        Temp_Text=selectLeft.options[i].text;   
        Temp_ID=selectLeft.options[i].value;   
        for(j=i;j>0;j--){   
            selectLeft.options[j].text=selectLeft.options[j-1].text;   
            selectLeft.options[j].value=selectLeft.options[j-1].value;   
        }   
        selectLeft.options[0].value=Temp_ID;   
        selectLeft.options[0].text=Temp_Text;       
        selectLeft.selectedIndex=0;   
    }   
}   

//移至底部   
function moveToDown(){   
    var i = selectLeft.selectedIndex;   
    var j = selectLeft.length-1   
    if(i < j){   
        Temp_Text = selectLeft.options[i].text;   
        Temp_ID = selectLeft.options[i].value;   
        for(var k=i+1;k<=j;k++){   
            selectLeft.options[k-1].text=selectLeft.options[k].text;   
            selectLeft.options[k-1].value=selectLeft.options[k].value;   
        }   
         selectLeft.options[j].text=Temp_Text;   
         selectLeft.options[j].value=Temp_ID;   
         selectLeft.selectedIndex=j;   
    }   
}   
//-->
</script>

</body>
</html>