***综合类***选择表单特效 可能很少人能用到
把下列代码加到网页的<body></body>标签之间 从google下载我的照片管理软件要完成此效果需要两个步骤
第一步:把如下代码加入到<head>区域中
<script language="javascript">
<!-- begin
function moveover()
{
var boxlength = document.choiceform.choicebox.length;
var selecteditem = document.choiceform.available.selectedindex;
var selectedtext = document.choiceform.available.options.text;
var selectedvalue = document.choiceform.available.options.value;
var i;
var isnew = true;
if (boxlength != 0) {
for (i = 0; i < boxlength; i++) {
thisitem = document.choiceform.choicebox.options.text;
if (thisitem == selectedtext) {
isnew = false;
break;
}
}
}
if (isnew) {
newoption = new option(selectedtext, selectedvalue, false, false);
document.choiceform.choicebox.options = newoption;
}
document.choiceform.available.selectedindex=-1;
}
function removeme() {
var boxlength = document.choiceform.choicebox.length;
arrselected = new array();
var count = 0;
for (i = 0; i < boxlength; i++) {
if (document.choiceform.choicebox.options.selected) {
arrselected = document.choiceform.choicebox.options.value;
}
count++;
}
var x;
for (i = 0; i < boxlength; i++) {
for (x = 0; x < arrselected.length; x++) {
if (document.choiceform.choicebox.options.value == arrselected) {
document.choiceform.choicebox.options = null;
}
}
boxlength = document.choiceform.choicebox.length;
}
}
function saveme() {
var strvalues = "";
var boxlength = document.choiceform.choicebox.length;
var count = 0;
if (boxlength != 0) {
for (i = 0; i < boxlength; i++) {
if (count == 0) {
strvalues = document.choiceform.choicebox.options.value;
}
else {
strvalues = strvalues + "," + document.choiceform.choicebox.options.value;
}
count++;
}
}
if (strvalues.length == 0) {
alert("您没有选择任何内容");
}
else {
alert("您选择的内容如下:\r\n"+"第" + strvalues+"条");
}
}
//end -->
</script>
第二步:把如下代码加入到<body>区域中
<center>
<form name="choiceform">
<table border=0>
<tr>
<td valign="top" width=175>
<div align="center">可选内容:<br>
<select name="available" size=10 onchange="moveover();">
<option value="1">内容一</option>
<option value="2">内容二</option>
<option value="3">内容三</option>
<option value="4">内容四</option>
<option value="5">内容五</option>
<option value="6">内容六</option>
<option value="7">内容七</option>
<option value="8">内容八</option>
<option value="9">内容九</option>
<option value="10">内容十</option>
</select>
</div>
</td>
<td valign="top">
<div align="center">你的选择:<br>
<select multiple name="choicebox" style="width:150;" size="10">
</select>
</div>
</td>
</tr>
<tr>
<td colspan=2 height=10>
<div align="center">
<input type="button" value="删除" onclick="removeme();">
<input type="button" value="结果" onclick="saveme();">
</div>
</td>
</tr>
</table>
</form>
</center>
----------- -------- -- -----------------
拥有三人行论坛管理系列软 件,一个人 就可以 管 理一个论坛的更新维护。还能使您的论坛有千人在线的真实火暴效果,让您不在为论坛因没有人气而留不住会员而烦恼,使您的论坛早日成为一流的论 坛。详情请登陆网站:http://www.cnsrx.cn 三人行论坛管理软件,站长必备的专业好工具。(您使用的是免费版 本,购买收费版本后,将不带广告。 业务QQ:247216 4 49852 27)
页:
[1]