菜鸟问题:有两个select 组件选择一个的一项自动增加到另一个里面

javastart 2003-06-27 04:48:32
网页html如下
功能是例如双击一个select 组件选择一个的一项自动增加到另一个里面
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
</head>

<body>

<form method="POST" action="--WEBBOT-SELF--" name="form1">
<!--webbot bot="SaveResults" U-File="fpweb:///_private/form_results.txt"
S-Format="TEXT/CSV" S-Label-Fields="TRUE" --><p><select size="2" name="D1" onchange="window.alert('aaa')" ondblclick="">
<option id="a1" value="1">1asdasddasd</option>
<option >2</option>
<option>3</option>
<option>4</option>
</select><select size="2" name="D2" onchange="window.alert('aaa')" ondblclick="">
<option id="a2" value="1">1asdasddasd</option>
<option >2</option>
<option>3</option>
<option>4</option>
</select></p>
</form>

</body>

</html>
...全文
111 5 打赏 收藏 举报
写回复
5 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
梦里饭香 2003-06-27
阿信,我又要夸奖你了!呵呵
  • 打赏
  • 举报
回复
javastart 2003-06-27
谢谢上面三位高手,帮了我的大忙
  • 打赏
  • 举报
回复
fason 2003-06-27
<script language="JavaScript">
<!--
function s(n,m){
var a=eval("document.form1.s"+n)
var b=eval("document.form1.s"+m)
b.options[b.options.length]=new Option(a.options[a.selectedIndex].text,a.options[a.selectedIndex].value)
a.options[a.selectedIndex]=null;
}
//-->
</script>
<form method="POST" action="--WEBBOT-SELF--" name="form1">
<select size="5" name="s1" ondblclick="s(1,2)">
<option id="a1" value="1">1asdasddasd</option>
<option >2</option>
<option>3</option>
<option>4</option>
</select>
<select size="5" name="s2" ondblclick="s(2,1)">
<option id="a2" value="1">1asdasddasd</option>
<option >2</option>
<option>3</option>
<option>4</option>
</select></p>
</form>
  • 打赏
  • 举报
回复
meizz 2003-06-27
//双击移动项目

<form>
<select id=list1 size=8 ondblclick="moveOption(this, this.form.list2)">
<option value=A>aaaaaaaaaa
<option value=B>bbbbbbbbbb
<option value=C>cccccccccc
<option value=D>dddddddddd
<option value=E>eeeeeeeeee
<option value=F>ffffffffff
<option value=G>gggggggggg
<option value=H>hhhhhhhhhh
</select>
<select id=list2 size=8 ondblclick="moveOption(this, this.form.list1)">
</select>
</form>

<script language="JavaScript"><!--
function moveOption(e1, e2){
try{
var e = e1.options[e1.selectedIndex];
e2.options.add(new Option(e.text, e.value));
e1.options.remove(e1.selectedIndex);
} catch(e){}
}
//--></script>
  • 打赏
  • 举报
回复
lsrzm 2003-06-27
参照一下:

<table width = 520 border =1 align = center>
<tr>
<td width = 150 align = center>
<Select name = Province id = Province size = 7 multiple = true ondblclick ="SelectAll(this)">
<option value = 1>山东
<option value = 2>江苏
<option value = 3>安徽
<option value = 4>河北
<option value = 5>河南
<option value = 6>江西
<option value = 7>山西
<option value = 8>陕西
<option value = 9>宁夏
<option value = 0>辽宁
</Select>
</td>
<td width = 170 align = center>
<img src = '../img/create.gif' style = "cursor:hand;" border = 0 width = 30 height = 20 onclick = Create(document.all.Province,document.all.NewProvince)>
<img src = '../img/release.gif' style = "cursor:hand;" border = 0 width = 30 height = 20 onclick = Create(document.all.NewProvince,document.all.Province)>
</td>
<td width = 150 align = center>
<Select name = NewProvince id = NewProvince size = 7 multiple = true ondblclick ="SelectAll(this)">

</Select>
</td>
<td width = 170 align = center>
<img src = '../img/create.gif' style = "cursor:hand;" border = 0 width = 30 height = 20 onclick = Create(document.all.NewProvince,document.all.SecProvince)>
<img src = '../img/release.gif' style = "cursor:hand;" border = 0 width = 30 height = 20 onclick = Create(document.all.SecProvince,document.all.NewProvince)>
</td>
<td width = 150 align = center>
<Select name = SecProvince id = SecProvince size = 7 multiple = true ondblclick ="SelectAll(this)">

</Select>
</td>
</tr>
<tr height = 80>
<td align = center>
<select id = Sel1>
<option>AA
<option>BB
<option>CC
<option>AA
<option>BB
<option>DD
</select><br>Source
</td>
<td colspan = 3 align = center>
<input type = button value = Add onclick = "Add()">
</td>
<td align = center>
<select id = Sel2>
</select><br>Target
</td>
</tr>
</table>

<script language = javascript>
/*
*多选下拉列表动态增加函数:Create(SourseObject,TargetObject);
*参数:SourseObject:表示要动态添加的源Select;
*参数:TargetObject:表示要动态接受的目的Select;
*例:Create(document.all.SourSelect,document.all.TarSelect);
*作者:月影飞鸿 于 2003-05-26晚作
*/
function Create(SourceSelect,TargetSelect)
{
var IsCreate = true;
var theIndex = SourceSelect.selectedIndex;
var theLength = SourceSelect.length ;
if (theIndex == -1 ) //如果源Select为空的话,则退出过程
return false;
while (IsCreate) //添加到目的Select循环
{
theValue = SourceSelect.options[theIndex].text; //得到所选择的文本

TargetSelect.options.add(new Option(theValue)); //目的Select增加一个文本

theIndex = theIndex + 1; //如果是选择多列的话,对下一个进行处理

if (theIndex == theLength) //theLength 如果是4的话,则theIndex应该是3,
{ //如果两者想等的话,则源Select多了一个值,
IsCreate = false; //所以需要退出循环
break;
}
if (SourceSelect.options[theIndex].selected == false)//如果没有被选择的话,则退出循环
{
IsCreate = false;
}
}

while (IsCreate == false) //删除源select循环
{
SecIndex = SourceSelect.selectedIndex; //动态得到被选择的索引
theLength = SourceSelect.length ; //动态得到Select的长度
SourceSelect.remove(SecIndex); //删除指定索引的元素
if (theLength == 1) //表示最后一个元素已删除,
return false; //源select空了,退出循环
if (theLength == SecIndex + 1) //表示多选的已全部删掉,退出循环
return false;
if (SourceSelect.options[SecIndex].selected == false)
{
IsCreate = true;
}
}
}

function SelectAll(theSel) //双击全部选中函数
{
for (i = 0 ;i<theSel.length;i++)
{
theSel.options[i].selected = true;
}
}

function Add()
{
YesIt = false;
SelectText = Sel1.options[Sel1.selectedIndex].text;
for (i = 0 ;i < Sel2.length ; i++)
{
if (Sel2.options[i].text == SelectText)
{
alert("Target中已经存在!");
YesIt = true;
}
}
if (YesIt == false)
{
Sel2.options.add(new Option(SelectText));
YesIt = true;
}
if (Sel2.length == 0)
{
Sel2.options.add(new Option(SelectText));
}
}
</script>
  • 打赏
  • 举报
回复
相关推荐
发帖
JavaScript
加入

8.6w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
申请成为版主
帖子事件
创建了帖子
2003-06-27 04:48
社区公告
暂无公告