读书人

请问如何实现列表框的效果?多谢

发布时间: 2012-03-22 17:43:57 作者: rapoo

请教怎么实现列表框的效果?谢谢
怎么实现下面的javascript 的效果?用select_tag 不行啊。 还是一般就用javascript ?

代码:

<table width=400 align=center border=0>

<tr>
<td width=40% align=center>
列表一
</td>
<td width=20% align=center>
操作
</td>
<td width=40% align=center>
列表二
</td>
</tr>
<tr>
<td width=40% align=center>
<form name=form1>
<select size=10 name=select1 multiple>
<option value=1> sample string 1 </option>
<option value=2> sample string 2 </option>
<option value=3> sample string 3 </option>
<option value=4> sample string 4 </option>
<option value=5> sample string 5 </option>

</select>
</form>
</td>
<td valign=middle width=20% align=center>
<br>
<br>
<input type=button name=btngoleft onclick= "go_left(); " value= " < < ">
<br>
<br>


<input type=button name=btngoright onclick= "go_right(); " value= "> > ">
<br>
<br>
</td>
<td width=40% align=center>
<form name=form2>
<select size=10 length=40 name=select2 multiple >
</select>
</form>
</td>
</tr>
</table>

<script language=javascript>
//将列表框1中的选定部分移到列表框2中
function go_left()
{

for (i=0 ; i <=form2.select2 .options .length -1 ; i++)
{
//如果这条被选中则复制倒列表框1中
if (form2.select2 .options [i].selected)
{
var element = window.Option.create (form2.select2.options [i].text,
form2.select2 .options[i].value,0);
form1.select1.add (element);
}

}
var j = 0 ;

//删除选定记录
for (i=0 ; i < form2.select2 .options .length ; i++)


{
if (form2.select2 .options [i].selected)
{
form2.select2.remove(i);
i = i - 1 ;
}

}
}

//将列表框2中的选定部分移到列表框1中
function go_right()
{
for (i=0 ; i <=form1.select1 .options .length -1 ; i++)
{
if (form1.select1 .options [i].selected )
{
var element = window.Option.create (form1.select1.options [i].text,
form1.select1 .options[i].value,0);
form2.select2.add (element);
}

}
for (i=0 ; i < form1.select1 .options .length ; i++)
{
if (form1.select1 .options [i].selected )
{
form1.select1.remove(i);
i = i - 1 ;
}



}


}

</script>


[解决办法]
IE 和其他浏览器对于 select 对象的添加、删除操作不一样,google 搜索一下有具体的内容。用 JavaScript 可以搞定的,分别判断一下就可以

读书人网 >Ruby Rails

热点推荐