用自定义按钮控制multiple型select元素的上下移动

写JS脚本最烦心之处莫过于由于浏览器标准不统一导致的程序复杂性，现在，尽管已经有很多AJAX框架对各种浏览器的区分都做了封装，但现实中一些小问题的处理上，考虑使用这些东西似乎不太现实。这几天，刚好需要做一个小小的demo页面其中有些东西刚好可以写出来以备后用。

需求如下：

1.现有一select框，代码如下：

xml 代码

<select name="hasitem" multiple size=19>
    <option selected>t-mobile game restrictionsoption>
    <option>




    option>
    <option>gdsfgdsfgdsgoption>
    <option>q2432342rewe432option>
    <option>2dfaesr34option>
    <option>t-mobile game restrictionsoption>
    <option>436t43ret4343option>
    <option>t-mobile game restrictionsoption>
    <option>545435353453option>
    <option>t-mobile game restrictionsoption>
    <option>fdsgdggtrgregoption>
    <option>t-mobile game restrictionsoption>
    <option>5756432534543option>
    <option>t-mobile game restrictionsoption>
    <option>ggfy456454343option>
    <option>t-mobile game restrictionsoption>
select>

 

2.有两个按钮，通过这两个按钮的点击事件来控制select框中内容的上下移动。

xml 代码

<input name="buttong_04" type="button" value="up" class="button2" onClick="moveup();"><br>
<input name="buttong_05" type="button" value="down" class="button2" onClick="movedown();">

 

开始时，也没有太多留意只是从网上找找源码三两改，用IE打开进行测试，似乎没有什么问题，调试代码如下：

xml 代码

function moveup(){
    var select_body =document.forms[0].hasitem;
    if(select_body.selectedIndex != -1){
        var flag = select_body.selectedIndex;
        if(flag==0){
            alert("The Rule has already at the top level!");
            return;
        }
        for(var i = 0; i < select_body.length ; i ++){
            if(select_body.options[i].selected){
                var nOptionu = document.createElement("option");
                var nOptiond = document.createElement("option");
                nOptionu.text = select_body.options[i].text;
                nOptionu.value = select_body.options[i].value;
                nOptiond.text = select_body.options[i-1].text;
                nOptiond.value = select_body.options[i-1].value;
                select_body.remove(i);
                select_body.remove(i-1);
                document.forms[0].hasitem.add(nOptionu,i-1);
                document.forms[0].hasitem.add(nOptiond,i);
                select_body.options[i-1].selected=true;
            }
        }
    }else
        alert("Please select a Rule!");
}

function movedown(){
    var select_body =document.forms[0].hasitem;
    if(select_body.selectedIndex != -1){
        var flag = select_body.options.length;
        if(select_body.selectedIndex==flag-1){
            alert("Already reached bottom!");
            return;
        }
        for(var i = 0; i < select_body.length ; i ++){
            if(select_body.options[i].selected){
                var nOptionu = document.createElement("OPTION");
                var nOptiond = document.createElement("OPTION");
                nOptiond.text = select_body.options[i].text;
                nOptiond.value = select_body.options[i].value;
                nOptionu.text = select_body.options[i+1].text;
                nOptionu.value = select_body.options[i+1].value;
                select_body.remove(i);
                document.items.hasitem.add(nOptiond,i+1);
                select_body.options[i+1].selected=true;
                break;
            }
        }
    }else
        alert("Please select a Rule!");
}

 

由于客户的特殊需求，不管IE是否能够执行，但必须保证Firefox可以执行。在这种变态的要求下，我不得不把我的页面拉到Firefox上调试一次。最终的结果让我大失所望——全乱了，仔细研究了一下问题所在才发现是Firefox不支持add方法，怎么办，得改用其他的方式来实现了，想来想去也只有replace方法或许可以拿来用一下。怀着一种惴惴不安的尝试的心情，我将上面的代码进行了一些改动，具体改动后的内容如下：

js 代码

/**
 * Author: DanlleyW
 * Date: 21/11/2007
 * Comments: only support for Firefox
 */
function moveup(){
    var select_body =document.forms[0].hasitem;
    if(select_body.selectedIndex != -1){
        var flag = select_body.selectedIndex;
        if(flag==0){
            alert("The Rule has already at the top level!");
            return;
        }
        //alert(select_body.selectedIndex);
        for(var i = 0; i < select_body.length ; i ++){
            if(select_body.options[i].selected){
                var nOptionu = document.createElement("option");
                var nOptiond = document.createElement("option");
                nOptionu.text = select_body.options[i].text;
                nOptionu.value = select_body.options[i].value;
                nOptiond.text = select_body.options[i-1].text;
                nOptiond.value = select_body.options[i-1].value;
                //below code is support for IE
                //select_body.remove(i);
                //select_body.remove(i-1);
                //below alert statement means the program can remove element successfully
                //alert("before: i="+nOptionu.text+"  i-1="+nOptiond.text+"\n after: i="+select_body.options[i].text+"  i-1="+select_body.options[i-1].text);
                try{
                    //now begin
                    //below code is support for Firefox
                    var oSel=document.getElementsByTagName("select");
                    var oOpt=oSel[0].getElementsByTagName("option");
                    oOpt[i].parentNode.replaceChild(nOptiond,oOpt[i]);
                    oOpt[i].parentNode.replaceChild(nOptionu,oOpt[i-1]);
                    //stoped
                    //below code is support for IE
                    //document.forms[0].hasitem.add(nOptionu,i-1);
                    //document.forms[0].hasitem.add(nOptiond,i);
                    //alert("i="+select_body.options[i].text+"  i-1="+select_body.options[i-1].text);
                }catch(e){
                    alert(e);
                }
                select_body.options[i-1].selected=true;
            }
        }
    }else
        alert("Please select a Rule!");
}

/**
 * Author: DanlleyW
 * Date: 21/11/2007
 * Comments: only support for Firefox
 */
function movedown(){
    try{
        var select_body =items.hasitem;
        if(select_body.selectedIndex != -1){
            var flag = select_body.options.length;
            if(select_body.selectedIndex==flag-1){
                alert("Already reached bottom!");
                return;
            }/*
            for(var i=select_body.length-1;i>=0;i--){
                if(select_body.options[i].selected==true){
                    select_body.selectedIndex=i;
                    break;
                }
            }*/
            for(var i = select_body.length-1; i >=0 ; i--){
                if(select_body.options[i].selected){
                    var nOptionu = document.createElement("option");
                    var nOptiond = document.createElement("option");
                    nOptiond.text = select_body.options[i].text;
                    nOptiond.value = select_body.options[i].value;
                    nOptionu.text = select_body.options[i+1].text;
                    nOptionu.value = select_body.options[i+1].value;
                    try{
                        var oSel=document.getElementsByTagName("select");
                        var oOpt=oSel[0].getElementsByTagName("option");
                        oOpt[i].parentNode.replaceChild(nOptiond,oOpt[i+1]);
                        oOpt[i].parentNode.replaceChild(nOptionu,oOpt[i]);
                    }catch(e){
                        alert("Already reached bottom!"+e);
                    }
                    select_body.options[i+1].selected=true;
                    //break;
                }
            }
        }else
            alert("Please select a Rule!");
    }catch(e){
        alert("unable go on moving!");
    }
}

代码完成后，调试在Firefox上没问题，但是当我拿到IE上进行测试时，什么都乱了，乱的一团糟。M$居然没有实现该W3C标准。反正也无所谓了，再写一个浏览器判断的方法问题解决。