浏览 4512 次
|
锁定老帖子 主题：用JS做了个ListBox的简单功能
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-10-29
这段时间在项目组都是做静态页面，都是些复制粘贴的活，难得碰到个稍微有点难度的页面。后来看到这个页面还不错，可以自己做做看，虽然公司已经有这样的组件，但不想用，反正没什么事，就当多学学JS好了。 页面效果如下：
代码也贴出来跟大家分享： <!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>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
function addIt(){
var input = document.getElementById("input");
var output = document.getElementById("output");
for(i = 0; i < input.length; i ++ ) {
if(input[i].selected == true) {
if( output.length == 0){
var option = new Option();
option.text = input[i].innerText;
output.add(option);
}
var isExist = false;
for(j = 0; j < output.length; j ++ ){
if (output[j].text == input[i].innerText){
isExist = true;
break;
}
}
if (isExist == false){
var option = new Option();
option.text = input[i].innerText;
output.add(option);
}
}
}
}
function deleteIt(){
var output = document.getElementById("output");
for(i = 0; i<output.length; i++){
if (output[i].selected == true){
output.options.removeChild(output[i--]);
}
}
}
// -->
</script>
<table width="80%" border="0" align="center" style="margin-top:20px;">
<tr>
<td align="right">
<select name="input" size="10" multiple="multiple" id="input" style="width:200px; font-size:16px">
<option>美元/英镑</option>
<option>美元/港币</option>
<option>美元/新加坡元</option>
<option>美元/日元</option>
<option>美元/加拿大元</option>
<option>美元/欧元</option>
</select>
</td>
<td align="center">
<p>
<input type="button" name="Submit" value="增 加" onclick="addIt()"/>
</p>
<p>
<input type="button" name="Submit2" value="删 除" onclick="deleteIt()"/>
</p>
</td>
<td>
<select name="output" size="10" multiple="multiple" id="output" style="width:200px; font-size:16px">
</select>
</td>
</tr>
</table>
</body>
</html>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-10-29
继续努力!
|
| 返回顶楼 | |
|
发表时间：2008-10-29
不错。
可是在FF下不行。 |
| 返回顶楼 | |
|
发表时间：2008-10-29
shgen 写道 不错。
可是在FF下不行。 哦？我还没试过呢，暂时我都是在IE下试的，没考虑FF的兼容。 谢谢你的提醒！！ |
| 返回顶楼 | |
