options的JS操作

时间:2013.3.5 编辑: 叶建勇 阅读量:5505 全屏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="UTF-8" />
<meta http-equiv="expires" content="0">
<meta name="author" content="Jaffe(onlea.com)" />
<meta http-equiv="keywords" content="JS,Option,增加,删除,上下移动,onlea,绿野飞扬">
<meta http-equiv="description" content="JS控制Option实例(增加、删除,上下移动">

    <title>JS控制Option实例(增加、删除,上下移动) - 绿野飞扬</title>
   
<style type=text/css>
<!--
body,div,td,input,legend {
font-size:12px;
color:#47391f;
font-family:Tahoma,Arial,sans-serif,宋体
}
fieldset,form{
    margin:0;
}
a{
    color:#66aa66;
text-decoration:none;
}
a:hover{
    color:#99aa66
}

#container{
    text-align:center;
}
#divBody,#divFooter{
    text-align:center;
    width:400px;
    margin:10px auto;
}
#divFooter{
    color:#999;
}

-->
</style>
</head>

<body>
    <div id="container">
      <div id="divBody">
                <form action="">                   
                    <fieldset>
                        <legend>JS控制Option实例(增加、删除,上下移动)</legend>
                        <div style="margin:15px auto;">
                       <table align="center">
                         <tr>
                           <td>
                             <div><b>Item Properties</b></div>
                             <select size="15" id="selectleft" style="width:150px">                                
                         <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" /><br />
                             <input value=" 删除 " type="button" id="moveback" /><br /><br />

                             <input value=" 顶部 " type="button" id="moveTop" /><br />
                             <input value=" 上移 " type="button" id="moveUp"><br />
                             <input value=" 下移 " type="button" id="moveDown"><br />
                             <input value=" 底部 " type="button" id="moveBottom" /><br />
                           </td>
                           <td>
                             <div><b>Properties You Chosen</b></div>
                             <select size="15" id="selectright" style="width:150px">
                             </select>
                           </td>
                         </tr>
                       </table>
                        </div>
                    </fieldset>
                </form>
      </div>

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

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

var addTo = document.getElementById("addto");
var moveBack = document.getElementById("moveback");
var moveTop = document.getElementById("moveTop");
var moveUp = document.getElementById("moveUp");
var moveDown = document.getElementById("moveDown");
var moveBottom = document.getElementById("moveBottom");

addTo.onclick = addOption;
moveBack.onclick = delOption;
moveTop.onclick = mTop;
moveUp.onclick = mUp;
moveDown.onclick = mDown;
moveBottom.onclick = mBottom;

//这个函数检验传入的值是否在有边出现过!
function hasOption(str){
    for(var i=0;i<selectRight.options.length;i++){
        if(selectRight.options[i].value==str){
        return false;
        }
    }
    return true;
}

function addOption(){
    var nowIndex    = selectRight.options.length;                  //右边的下一个索引
    var selectIndex = selectLeft.options.selectedIndex;         //左边被选种项索引
   
    if(selectIndex != -1){//如果选了一项,执行
        var selectText = selectLeft.options[selectIndex].text;      //被选种项文本
        var selectValue = selectLeft.options[selectIndex].value;   //被选种项值
     if(hasOption(selectValue)){//如果选中的项目右边没有,执行
            var newoption   = new Option(selectText,selectValue,false,false);
            selectRight.options[nowIndex] = newoption;
     }else{
         alert("该选项已经存在于右边列表中");      
   }
    }else{
     alert("请从左边列表中选择一个选项");
}
}

function delOption(){
    var selectIndex = selectRight.options.selectedIndex;
    if(selectIndex!=-1){
    selectRight.options[selectIndex] = null;                   //清空选种项
    }
}

function mTop(){  
    var i = selectRight.options.selectedIndex;
    if(i > 0){  
        Temp_Text=selectRight.options(i).text;  
        Temp_ID=selectRight.options(i).value;  
        for(j=i;j>0;j--){  
            selectRight.options(j).text=selectRight.options(j-1).text;  
            selectRight.options(j).value=selectRight.options(j-1).value;  
        }  
        selectRight.options(0).value=Temp_ID;  
        selectRight.options(0).text=Temp_Text;      
        selectRight.selectedIndex=0;  
    }  
}  
   
function mUp(){  
    var i = selectRight.options.selectedIndex;  
    var j = i-1  
    if(i>0){  
        Temp_Text = selectRight.options(j).text;  
        Temp_ID = selectRight.options(j).value;  
   
        selectRight.options(j).text = selectRight.options(i).text;  
        selectRight.options(j).value = selectRight.options(i).value;  
   
        selectRight.options(i).text = Temp_Text;  
        selectRight.options(i).value = Temp_ID;  
   
        selectRight.selectedIndex=j;  
    }  
}  
   
function mDown(){  
    var i = selectRight.options.selectedIndex;
    if (i != selectRight.length-1){  
        var j = i+1;  
        if(i < selectRight.length){  
            Temp_Text = selectRight.options(j).text;  
            Temp_ID = selectRight.options(j).value;  
   
            selectRight.options(j).text = selectRight.options(i).text;  
            selectRight.options(j).value = selectRight.options(i).value;  
   
            selectRight.options(i).text = Temp_Text;  
            selectRight.options(i).value = Temp_ID;  
   
            selectRight.selectedIndex=j;  
        }  
    }  
}  
   
function mBottom(){  
    var i = selectRight.selectedIndex;  
    var j = selectRight.length-1  
    if(i < j){  
        Temp_Text = selectRight.options(i).text;  
        Temp_ID = selectRight.options(i).value;  
        for(var k=i+1;k<=j;k++){  
            selectRight.options(k-1).text=selectRight.options(k).text;  
            selectRight.options(k-1).value=selectRight.options(k).value;  
        }  
   
        selectRight.options(j).text=Temp_Text;  
        selectRight.options(j).value=Temp_ID;  
   
        selectRight.selectedIndex=j;  
    }  
}  
//-->
</script>
    
    </div>
</body>
</html>