JS-选项卡效果

<!DOCTYPE html>
<html>
<head>
<title>2.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>
<script type="text/javascript">
var select1;
var select2;
window.onload = function(){
select1 = document.getElementById("select1");
select2 = document.getElementById("select2");
};
function addrightone(){
//selectedIndex 获取索引值 value 获取文本
var all_child = select1.childNodes;
var value = select1.value;
for(var i=0;i<all_child.length;i++){
if(all_child[i].value==value){
var op = document.createElement("option");
op.innerText=value.toString();
select2.appendChild(op);
select1.removeChild(all_child[i]);
}
}
}
function addrightall(){
var child1 = select1.childNodes;
for(var i=0;i<child1.length;i++){
var value = child1[i].value;
if(child1[i].nodeType==1){
var op = document.createElement("option");
op.innerText=value.toString();
select2.appendChild(op);
select1.removeChild(child1[i]);
i--;
}
}
}
function addleftone(){
var all_child = select2.childNodes;
var value = select2.value;
for(var i=0;i<all_child.length;i++){
if(all_child[i].value==value){
var op = document.createElement("option");
op.innerText=value.toString();
select1.appendChild(op);
select2.removeChild(all_child[i]);
}
}

}
function addleftall(){
var child2 = select2.childNodes;
for(var i=0;i<child2.length;i++){
var value = child2[i].value;
if(child2[i].nodeType==1){
var op = document.createElement("option");
op.innerText=value.toString();
select1.appendChild(op);
select2.removeChild(child2[i]);
i--;
}
}

}
</script>
<style type="text/css">
select{
height:200px;width:100px;
}
</style>
<body>
<table>
<tr>
<td>
<select id="select1" multiple="multiple">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
<option>选项6</option>

</select>
</td>
<td>
<select id="select2" multiple="multiple">

</select>
</td>
</tr>
<tr>
<td>
<input type="button" id="add_right_one" value="选中则添加右边" onclick="addrightone()"><br>
<input type="button" id="add_right_all" value="全部添加右边" onclick="addrightall()">
</td>
<td>
<input type="button" id="add_left_one" value="选中则添加左边" onclick="addleftone()"><br>
<input type="button" id="add_left_all" value="全部添加左边" onclick="addleftall()">
</td>
</tr>
</table>
</body>
</html>

猜你喜欢