DOM事件使用

zzuqiang

浏览: 8188 次
性别:
来自: 郑州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

js xhtml dom

练习2：使用js 练习DOM处理事件

源代码：

效果图见附件：

<!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>
<title>无标题页</title>
<style type="text/css">
ul
{
list-style:none;
}
#Select1
{
border-bottom-style:solid;
border:solid 1px black;
position:absolute;
width:200px;
height:300px;
top:10px;
left:200px;
}

#Select2
{
border-bottom-style:solid;
border:solid 1px black;
position:absolute;
top:10px;
right:300px;
width:200px;
height:300px;
}
#center
{
position:absolute;
right:500px;
left:400px;
}

.style3
{
left: 400px;
top: 15px;
height: 290px;
right: 564px;
}

.style4
{
width: 194px;
right: 300px;
top: 10px;
left: 750px;
height: 296px;
}

.style5
{
width: 194px;
left: 200px;
top: 10px;
}

.style6
{
width: 44px;
}

</style>

</head>
<body>

<select id="Select1" class="style5" size="18" multiple="multiple">
<option selected="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
<option>选项6</option>
</select>

<div id="center" class="style3" >
<ul>
<li><input id="Button1" type="button" value="-->" class="style6" onclick="return Button1_onclick()" /></li>
<li><input id="Button2" type="button" value="==>" class="style6" onclick="return Button2_onclick()" /></li>
<li><input id="Button3" type="button" value="<--" class="style6" onclick="return Button3_onclick()" /></li>
<li><input id="Button4" type="button" value="<==" class="style6" onclick="return Button4_onclick()" /></li>
</ul>
</div>

<select id="Select2" class="style4" size="18" multiple="multiple">

</select>
<script language="javascript" type="text/javascript">
document.getElementById("Button1").onclick = Button1_onclick;
var selects = document.getElementById("Select1");
var otherSelect = document.getElementById("Select2");
var elements = selects.length;
function Button1_onclick() {
for(var i =0 ; i<elements ; i++ ){
if(selects.options[i].selected){
var option = new Option(selects.options[i].innerHTML ,i+1);
otherSelect.options[otherSelect.length] = option;
selects.removeChild(selects.options[i]);
}
}//for
}