JS ListBox的简单功能实现代码

ttx9n · 发表于 2008-10-29 22:11:41

这段时间在项目组都是做静态页面，都是些复制粘贴的活，难得碰到个稍微有点难度的页面。后来看到这个页面还不错，可以自己做做看，虽然公司已经有这样的组件，但不想用，反正没什么事，就当多学学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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

hd1tvqb3 · 发表于 2022-8-19 01:26:32

来看看！！！

JosephSA · 发表于 2022-9-29 23:16:25

撒旦撒旦撒擦擦擦擦

btbhs8t · 发表于 2023-6-15 01:06:26

给爸爸爸爸爸爸爸爸爸爸八佰伴八佰伴

jasonlong · 发表于 2023-7-1 05:49:25

我要金豆金豆金豆

9jduu05 · 发表于 2023-8-21 15:33:30

66666666666666666666

czoz5y · 发表于 2023-9-28 22:22:05

非常vbcbvcvbvcb

a971560 · 发表于 2024-3-2 07:22:07

的vgdsvsdvdsvdsvds

95nd4ba · 发表于 2024-3-14 16:02:48

了乐趣了去了去了去了去了

平平安安 · 发表于 2024-4-4 04:37:39

的沙发水电费水电费

账号		自动登录	找回密码
密码			立即注册

[JavaScript] JS ListBox的简单功能实现代码

相关帖子