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>

原创粉丝点击