转自: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));
JS控制Option实例(增加、删除,上下移动)
最新推荐文章于 2022-10-19 04:21:39 发布