博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
表单特效-点击左侧选项选入右侧选择框
阅读量:4054 次
发布时间:2019-05-25

本文共 2778 字,大约阅读时间需要 9 分钟。

<html>

<head>
<title>中国站长天空-网页特效-表单特效-点击左侧选项选入右侧选择框</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function moveOver()
{
var boxLength = document.choiceForm.choiceBox.length;
var selectedItem = document.choiceForm.available.selectedIndex;
var selectedText = document.choiceForm.available.options[selectedItem].text;
var selectedValue = document.choiceForm.available.options[selectedItem].value;
var i;
var isNew = true;
if (boxLength != 0) {
for (i = 0; i < boxLength; i++) {
thisitem = document.choiceForm.choiceBox.options[i].text;
if (thisitem == selectedText) {
isNew = false;
break;
}
}
}
if (isNew) {
newoption = new Option(selectedText, selectedValue, false, false);
document.choiceForm.choiceBox.options[boxLength] = 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[i].selected) {
arrSelected[count] = document.choiceForm.choiceBox.options[i].value;
}
count++;
}
var x;
for (i = 0; i < boxLength; i++) {
for (x = 0; x < arrSelected.length; x++) {
if (document.choiceForm.choiceBox.options[i].value == arrSelected[x]) {
document.choiceForm.choiceBox.options[i] = 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[i].value;
}
else {
strValues = strValues + "," + document.choiceForm.choiceBox.options[i].value;
}
count++;
}
}
if (strValues.length == 0) {
alert("您没有选择任何内容");
}
else {
alert("您选择的内容如下:/r/n"+"第" + strValues+"条");
}
}
// End -->
</script>
<form name="choiceForm">
<table border=0>
<tr>
<td valign="top" width=175>
<div align="center">可选内容:<br>
<select name="available" size=10 οnchange="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="删除" οnclick="removeMe();">
<input type="button" value="结果" οnclick="saveMe();">
</div>
</td>
</tr>
</table>
</form>
</body>
</html>

转载地址:http://xeoci.baihongyu.com/

你可能感兴趣的文章
不是人过的四天!
查看>>
Roller2.1的配置手册
查看>>
关于session的详细解释
查看>>
Just one month!
查看>>
Reading Design Patterns
查看>>
华为公司 java 面试题
查看>>
走好创业之路第一步——创业时机的选择与目标的设定
查看>>
软件项目计划如何编写
查看>>
10 Places You Must Use Ajax
查看>>
刷脸支付青蛙Pro打通微信卡包小程序
查看>>
Flutter 事件分发流程
查看>>
大数据分析需要什么技术架构?
查看>>
Java开发有必要转大数据吗?
查看>>
Scala对于大数据开发重要吗?Scala基础学习建议
查看>>
Java大数据方向:入行Java大数据值得吗
查看>>
转行大数据还是人工智能,哪个发展更好
查看>>
大数据工程师简历怎么写,更受到HR青睐?
查看>>
大数据开发就业:大数据开发有哪些岗位
查看>>
Spark计算引擎:Spark数据处理模式详解
查看>>
Hadoop生态圈:Hadoop技术入门书单
查看>>