您的位置：首页 > 其它

实现左右移动的下拉菜单效果

2012-02-29 16:17 387 查看

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script language="javascript" type="text/javascript">

function tianjia(){

//获取要添加的元素

var val = document.getElementById("tianjia").value;

//获取select框中的值的个数

var obj = document.getElementById("left");

//创建文本内容

var text=document.createTextNode(val);

//创建一个option标签

var opt=document.createElement("option");

//把内容追加到option里

opt.appendChild(text);

//把option追加到左边的select框中

obj.appendChild(opt);

}

function mov(val1,val2){

//获取val1所有的option

var selnum = document.getElementById(val1).options;

//获取val2对象

var obj = document.getElementById(val2);

for(var i=0; i<selnum.length; i++){

if(selnum[i].selected){

//创建文本内容

var text=document.createTextNode(selnum[i].firstChild.nodeValue);

//创建option标签

var opt=document.createElement("option");

//把内容追加到option里

opt.appendChild(text);

//在val2中添加

obj.appendChild(opt);

//删除

var shan=document.getElementById(val1);

shan.removeChild(selnum[i]);

}

}

}

</script>

</head>

<body>

<table width="200" border="0">

<tr>

<td colspan="3" align="center"><input type="text" id="tianjia">

<input name="button" type="button" onclick="tianjia()" value="添加" /></td>

<td colspan="3" align="center"></td></tr>

<tr bgcolor="#00FFFF">

<td><select multiple="multiple" id="left" style="width:100px; height:200px">

<option>苹果</option>

<option>香蕉</option>

<option>草莓</option>

<option>梨</option>

</select>
</td>

<td align="center">

<input type="button" value="向右" onclick="mov('left','right')"><br><br>

<input type="button" value="向左" onclick="mov('right','left')"><br><br>
</td>

<td><select multiple="multiple" id="right" style="width:100px; height:200px"></select></td>

</tr>

</table>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航