两个下拉列表的移动(只完成左到右，右到左原理相同)

huweiyi

浏览: 87607 次
性别:
来自: 重庆

最近访客更多访客>>

gathers520

2669018845

4348426qq163

几人憔悴几人泪

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

<!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=utf-8" />
<title>无标题文档</title>
<script language="javascript">
/* 增加选中的部分 */
function add() {
var firstNode = document.getElementById("first");
var second = document.getElementById("second");
var options = firstNode.getElementsByTagName("option");
for (var i = 0; i < options.length; i++) {
var optionElement = options[i];
if (optionElement.selected) {
//alert(optionElement.value + "    "+ optionElement.text);
//创建标签
var element = document.createElement("<option>");
//设置属性
element.setAttribute("value", optionElement.value);
//创建文本
var optionText = document.createTextNode(optionElement.text);
//追加文本
element.appendChild(optionText);
//增加option选项
second.appendChild(element);
//移除第一个下拉列表中的选项
optionElement.parentNode.removeChild(optionElement);
}
}
}

/*增加全部*/
function add_all() {
var firstNode = document.getElementById("first");
var second = document.getElementById("second");
var options = firstNode.getElementsByTagName("option");
var optionSize = options.length;
for (var i = 0; i < optionSize; i++) {
var optionElement = options[0];
//alert(optionElement.value + "    "+ optionElement.text + "    i"+ i);
//创建标签
var element = document.createElement("<option>");
//设置属性
element.setAttribute("value", optionElement.value);
//创建文本
var optionText = document.createTextNode(optionElement.text);
//追加文本
element.appendChild(optionText);
//增加option选项
second.appendChild(element);
//移除第一个下拉列表中的选项（注意这里删除的是option[0]）
optionElement.parentNode.removeChild(options[0]);
}
}

/* 移除选中的部分 */
function remove() {

}

/* 移除全部 */
function remove_all() {

}

function change(){
     var first = document.getElementById("first");
     var second = document.getElementById("second");
second.appendChild(this[this.selectedIndex]);
}

</script>
</head>

<body>
<table align="center">
    <tr>
            <td id="1"> 
                <select name="first" size="10" multiple="multiple" id="first" class="td3" ondblclick="change()">
                    <option value="选项1">选项1</option>
                    <option value="选项2">选项2</option>
                    <option value="选项3">选项3</option>
                    <option value="选项4">选项4</option>
                    <option value="选项5">选项5</option>
                    <option value="选项6">选项6</option>
                    <option value="选项7">选项7</option>
                    <option value="选项8">选项8</option>
                    <option value="选项9">选项9</option>
                </select>
                <td>
                <td width="69" valign="middle">
                <input name="add" id="add" type="button" class="button" value="-->" onclick="add();"/>
                    <input name="add_all" id="add_all" type="button" class="button" value="==>" onclick="add_all();"/>
                    <input name="remove" id="remove" type="button" class="button" value="<--" onclick="remove();"/>
                    <input name="remove_all" id="remove_all" type="button" class="button" value="<==" onclick="remove_all();"/>
                </td>
                <td> 
                <select name="second" size="10" multiple="multiple" id="second" class="td3">
                    <option value="选项10">选项10</option>
                </select>
                <td>
          </tr>
    </table>

</body>
</html>

分享到：

动态添加表格和删除表格(复制粘贴就可以运 ... | js完成跑马灯程序

2014-02-08 16:56
浏览 524
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论