您现在的位置: 365建站网 > 365学习 > select 可移动表单

select 可移动表单

文章来源:365jz.com     点击数:317    更新时间:2009-12-02 21:18   参与评论

<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>

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (317人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------