JS控制Option实例(增加、删除，上下移动)

最新推荐文章于 2024-07-15 18:18:21 发布

mw666999

最新推荐文章于 2024-07-15 18:18:21 发布

阅读量162

点赞数

分类专栏： js 文章标签： J# XHTML .net Blog

本文链接：https://blog.csdn.net/mw666999/article/details/83675072

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏


转自：http://blog.csdn.net/kuangmiao1120/archive/2009/11/10/4793887.aspx
<!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>


js动态添加、删除select的option
<select id="ddlResourceType" onchange="getvalue(this)"> 
</select> 

   动态删除select中的所有options： 
      document.getElementById("ddlResourceType").options.length=0; 

    动态删除select中的某一项option： 
      document.getElementById("ddlResourceType").options.remove(indx);  

    动态添加select中的项option: 
      document.getElementById("ddlResourceType").options.add(new Option(text,value));

mw666999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS控制Option实例(增加、删除，上下移动)

[code="java"]转自：http://blog.csdn.net/kuangmiao1120/archive/2009/11/10/4793887.aspx JS控制Option实例(增加、删除，上下移动) - 绿野飞扬 ...
复制链接

扫一扫