select 可移动表单

<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=">>" οnclick="allToRight();"><br>
    <input type="button" value=">" οnclick="selectedToRight();"><br>
    <input type="button" value="<<" οnclick="allToLeft();"><br>
    <input type="button" value="<" οnclick="selectedToLeft();"><br>
    <input type="button" value="值" οnclick="getRightValue();">

</td>
<td>
    <select id="select_right" size="10" multiple="multiple" style="width:150px">
    </select>
</td>
</tr>
</table>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值