select 可移动表单
来源:互联网 发布:进销存软件报价 编辑:程序博客网 时间:2024/04/30 11:29
<script language="javascript">
/*
*email:yaqy@qq.com
*url: http://hi.baidu.com/tangtou
*/
function $(str){
return document.getElementById(str);
}
function removeOption(select,index)
{
$(select).options[index]=null;
//$(select).remove(index);
}
function appendOptionLast(select,text,value)
{
var elOptNew = document.createElement('option');
elOptNew.text = text;
elOptNew.value =value;
var elSel = document.getElementById(select);
try {
elSel.add(elOptNew, null); // 未能在 IE 中运行
}
catch(ex) {
elSel.add(elOptNew); //只适合于 IE
}
}
function allToRight(){
var left=$("select_left");
for (i = left.length - 1; i>=0; i--) {
try{
appendOptionLast("select_right",left.options[i].text,left.options[i].value);
}catch(e){}
//left.remove(i);
removeOption("select_left",i);
}
}
function selectedToRight(){
var left=$("select_left");
for (i = left.length - 1; i>=0; i--) {
if(left.options[i].selected){
try{
appendOptionLast("select_right",left.options[i].text,left.options[i].value);
}catch(e){}
//left.remove(i);
removeOption("select_left",i);
}
}
}
function selectedToLeft(){
var right=$("select_right");
for (i = right.length - 1; i>=0; i--) {
if(right.options[i].selected){
try{
appendOptionLast("select_left",right.options[i].text,right.options[i].value);
}catch(e){}
//right.remove(i);
removeOption("select_right",i);
}
}
}
function allToLeft(){
var right=$("select_right");
for (i = right.length - 1; i>=0; i--) {
try{
appendOptionLast("select_left",right.options[i].text,right.options[i].value);
}catch(e){}
//right.remove(i);
removeOption("select_right",i);
}
}
function getRightValue() //取得右边select的值
{
var right=$("select_right");
var str="";
for (i = right.length - 1; i>=0; i--) {
str+=right.options[i].value+";";
}
alert(str);
}
</script>
一个select表单移处数据的效果,非常好用。
<table>
<tr><td>
<select id="select_left" size="10" multiple="multiple" style="width:150px">
<option value="23562356856" selected="selected">张老大 23562356856</option>
<option value="23623568562">刘老四 23623568562</option>
<option value="23635254345">令胡冲 23623568562</option>
<option value="13714715608">杨庆荣 13714715608</option>
</select>
</td>
<td>
<input type="button" value=">>" onclick="allToRight();"><br>
<input type="button" value=">" onclick="selectedToRight();"><br>
<input type="button" value="<<" onclick="allToLeft();"><br>
<input type="button" value="<" onclick="selectedToLeft();"><br>
<input type="button" value="值" onclick="getRightValue();">
</td>
<td>
<select id="select_right" size="10" multiple="multiple" style="width:150px">
</select>
</td>
</tr>
</table>
- select 可移动表单
- web-前端之可移动的登录界面,并且可实现用户名重复的判断等表单事件
- 可输入的select
- 可输入select选单
- 可输入select选单
- 可输入的select
- 可输入的select
- 可输入的select
- 可输入的select
- select 可编辑
- 可输入的select
- 可输入的select
- 使<select>可输入
- 表单中 select 样式
- jQuery表单之 Select
- jQuery表单之 Select
- select表单美化
- jqueryMobile select表单
- 怎样提高读取文件的速度?
- 通过SQL存储过程删除过期的数据库Bak备份文件
- 求职经验
- Java SE -- Static Inner
- 字符串截取
- select 可移动表单
- struts2中web.xml配置struts.xml文件
- operator new 和new operator
- NORflash和NANDflash区别
- ASP.Net 页面缓存片段使用技巧
- 深入分析java前景
- struts2整合tiles及配置
- 以父之名
- (转) 李开复:我要找什么样的人一起创业