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

mw666666

浏览: 23066 次
性别:
来自: 保定

最近访客更多访客>>

bestscw

woodding2008

u012448215

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

J#XHTML .net Blog

转自：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));

分享到：

textarea 取每一行文字 | linux个人笔记

2010-07-26 17:40
浏览 1550
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

ext extend 解说

javascript 定义并立即执行匿名函数(两个括号格式)

JScript中的prototype(原型)属性研究

模仿JQuery.extend函数扩展自己对象的js代码

js 与或运算符 || && 妙用

可编辑的下拉框

不错的js效果

textarea双击删除一行

textarea 取每一行文字

动态修改框架(frame)src属性的方法

JS修改CSS的定义

仿google的下拉提示框

最近访客更多访客>>