`

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

MobileIEFirefox浏览器Ajax 
阅读更多

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

需求如下：

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

xml 代码
 
  1. <select name="hasitem" multiple size=19>  
  2.     <option selected>t-mobile game restrictionsoption>  
  3.     <option> ======</option>  
  4.     <option>gdsfgdsfgdsg</option>  
  5.     <option>q2432342rewe432</option>  
  6.     <option>2dfaesr34option>  
  7.     <option>t-mobile game restrictions</option>  
  8.     <option>436t43ret4343option>  
  9.     <option>t-mobile game restrictions</option>  
  10.     <option>545435353453</option>  
  11.     <option>t-mobile game restrictions</option>  
  12.     <option>fdsgdggtrgreg</option>  
  13.     <option>t-mobile game restrictions</option>  
  14.     <option>5756432534543</option>  
  15.     <option>t-mobile game restrictions</option>  
  16.     <option>ggfy456454343</option>  
  17.     <option>t-mobile game restrictions</option>  
  18. </select>  

 

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

xml 代码
 
  1. <input name="buttong_04" type="button" value="up" class="button2" onClick="moveup();"><br>  
  2. <input name="buttong_05" type="button" value="down" class="button2" onClick="movedown();">  

 

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

xml 代码
 
  1. function moveup(){   
  2.     var select_body =document.forms[0].hasitem;   
  3.     if(select_body.selectedIndex != -1){   
  4.         var flag = select_body.selectedIndex;   
  5.         if(flag==0){   
  6.             alert("The Rule has already at the top level!");   
  7.             return;   
  8.         }   
  9.         for(var i = 0; i < select_body.length ; i ++){   
  10.             if(select_body.options[i].selected){   
  11.                 var nOptionu = document.createElement("option");   
  12.                 var nOptiond = document.createElement("option");   
  13.                 nOptionu.text = select_body.options[i].text;   
  14.                 nOptionu.value = select_body.options[i].value;   
  15.                 nOptiond.text = select_body.options[i-1].text;   
  16.                 nOptiond.value = select_body.options[i-1].value;   
  17.                 select_body.remove(i);   
  18.                 select_body.remove(i-1);   
  19.                 document.forms[0].hasitem.add(nOptionu,i-1);   
  20.                 document.forms[0].hasitem.add(nOptiond,i);   
  21.                 select_body.options[i-1].selected=true;   
  22.             }   
  23.         }   
  24.     }else   
  25.         alert("Please select a Rule!");   
  26. }   
  27.   
  28. function movedown(){   
  29.     var select_body =document.forms[0].hasitem;   
  30.     if(select_body.selectedIndex != -1){   
  31.         var flag = select_body.options.length;   
  32.         if(select_body.selectedIndex==flag-1){   
  33.             alert("Already reached bottom!");   
  34.             return;   
  35.         }   
  36.         for(var i = 0; i < select_body.length ; i ++){   
  37.             if(select_body.options[i].selected){   
  38.                 var nOptionu = document.createElement("OPTION");   
  39.                 var nOptiond = document.createElement("OPTION");   
  40.                 nOptiond.text = select_body.options[i].text;   
  41.                 nOptiond.value = select_body.options[i].value;   
  42.                 nOptionu.text = select_body.options[i+1].text;   
  43.                 nOptionu.value = select_body.options[i+1].value;   
  44.                 select_body.remove(i);   
  45.                 document.items.hasitem.add(nOptiond,i+1);   
  46.                 select_body.options[i+1].selected=true;   
  47.                 break;   
  48.             }   
  49.         }   
  50.     }else   
  51.         alert("Please select a Rule!");   
  52. }  

 

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

js 代码
 
  1. /**  
  2.  * Author: DanlleyW  
  3.  * Date: 21/11/2007  
  4.  * Comments: only support for Firefox  
  5.  */  
  6. function moveup(){   
  7.     var select_body =document.forms[0].hasitem;   
  8.     if(select_body.selectedIndex != -1){   
  9.         var flag = select_body.selectedIndex;   
  10.         if(flag==0){   
  11.             alert("The Rule has already at the top level!");   
  12.             return;   
  13.         }   
  14.         //alert(select_body.selectedIndex);   
  15.         for(var i = 0; i < select_body.length ; i ++){   
  16.             if(select_body.options[i].selected){   
  17.                 var nOptionu = document.createElement("option");   
  18.                 var nOptiond = document.createElement("option");   
  19.                 nOptionu.text = select_body.options[i].text;   
  20.                 nOptionu.value = select_body.options[i].value;   
  21.                 nOptiond.text = select_body.options[i-1].text;   
  22.                 nOptiond.value = select_body.options[i-1].value;   
  23.                 //below code is support for IE   
  24.                 //select_body.remove(i);   
  25.                 //select_body.remove(i-1);   
  26.                 //below alert statement means the program can remove element successfully   
  27.                 //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);   
  28.                 try{   
  29.                     //now begin   
  30.                     //below code is support for Firefox   
  31.                     var oSel=document.getElementsByTagName("select");   
  32.                     var oOpt=oSel[0].getElementsByTagName("option");   
  33.                     oOpt[i].parentNode.replaceChild(nOptiond,oOpt[i]);   
  34.                     oOpt[i].parentNode.replaceChild(nOptionu,oOpt[i-1]);   
  35.                     //stoped   
  36.                     //below code is support for IE   
  37.                     //document.forms[0].hasitem.add(nOptionu,i-1);   
  38.                     //document.forms[0].hasitem.add(nOptiond,i);   
  39.                     //alert("i="+select_body.options[i].text+"  i-1="+select_body.options[i-1].text);   
  40.                 }catch(e){   
  41.                     alert(e);   
  42.                 }   
  43.                 select_body.options[i-1].selected=true;   
  44.             }   
  45.         }   
  46.     }else  
  47.         alert("Please select a Rule!");   
  48. }   
  49.   
  50. /**  
  51.  * Author: DanlleyW  
  52.  * Date: 21/11/2007  
  53.  * Comments: only support for Firefox  
  54.  */  
  55. function movedown(){   
  56.     try{   
  57.         var select_body =items.hasitem;   
  58.         if(select_body.selectedIndex != -1){   
  59.             var flag = select_body.options.length;   
  60.             if(select_body.selectedIndex==flag-1){   
  61.                 alert("Already reached bottom!");   
  62.                 return;   
  63.             }/*  
  64.             for(var i=select_body.length-1;i>=0;i--){  
  65.                 if(select_body.options[i].selected==true){  
  66.                     select_body.selectedIndex=i;  
  67.                     break;  
  68.                 }  
  69.             }*/  
  70.             for(var i = select_body.length-1; i >=0 ; i--){   
  71.                 if(select_body.options[i].selected){   
  72.                     var nOptionu = document.createElement("option");   
  73.                     var nOptiond = document.createElement("option");   
  74.                     nOptiond.text = select_body.options[i].text;   
  75.                     nOptiond.value = select_body.options[i].value;   
  76.                     nOptionu.text = select_body.options[i+1].text;   
  77.                     nOptionu.value = select_body.options[i+1].value;   
  78.                     try{   
  79.                         var oSel=document.getElementsByTagName("select");   
  80.                         var oOpt=oSel[0].getElementsByTagName("option");   
  81.                         oOpt[i].parentNode.replaceChild(nOptiond,oOpt[i+1]);   
  82.                         oOpt[i].parentNode.replaceChild(nOptionu,oOpt[i]);   
  83.                     }catch(e){   
  84.                         alert("Already reached bottom!"+e);   
  85.                     }   
  86.                     select_body.options[i+1].selected=true;   
  87.                     //break;   
  88.                 }   
  89.             }   
  90.         }else  
  91.             alert("Please select a Rule!");   
  92.     }catch(e){   
  93.         alert("unable go on moving!");   
  94.     }   
  95. }  

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

 

 

 

 

分享到：
| Inner class与匿名类相关问题汇总
评论
3 楼 danlley 2007-11-22  
这样好像没办法支持多选和跳选吧
2 楼 afcn0 2007-11-21  
不要不懂乱说,明明就是你胡乱使用js,这样 
<select name="hasitem" id="qqq" multiple size=19>      
    <option>t-mo bile game restrictions</option>      
    <option selected>   aaa   </option>      
    <option>gdsfgdsfgdsg</option>      
    <option>q2432342rewe432</option>      
    <option>2dfaesr34</option>      
    <option>t- mobile game restrictions</option>      
    <option>436t43ret4343</option>      
    <option>t-mob ile game restrictions</option>      
    <option>545435353453</option>      
    <option>t-mobile g ame restrictions</option>      
    <option>fdsgdggtrgreg</option>      
    <option>t-mob ile game restrictions</option>      
    <option>5756432534543</option>      
    <option>t-mobi e game restrictions</option>      
    <option>ggfy456454343</option>      
    <option>t-mob ile game restrictions</option>      
</select>  
<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();">      
<script>  
function moveup(){       
    var select_body =document.getElementById("qqq");    
    if(select_body.selectedIndex != -1){       
        var flag = select_body.selectedIndex;       
        if(flag==0){       
            alert("The Rule has already at the top level!");       
            return;       
        }       
//这里加入判断是因为ie下面无法使用insertBefore来调换1号和0号元素,故使用这种方法   
if(select_body.selectedIndex==1&&document.all)   
{   
var temp=select_body[select_body.selectedIndex];   
var t=temp.parentNode;   
temp.parentNode.removeChild(temp);   
setTimeout(function(){   
t.insertBefore(temp,t.options[0]);   
},0)}   
else   
select_body[select_body.selectedIndex].parentNode.insertBefore(select_body[select_body.selectedIndex],select_body[select_body.selectedIndex-1])      
  
    }else       
        alert("Please select a Rule!");       
}       
      
function movedown(){       
    var select_body =document.getElementById("qqq");       
    if(select_body.selectedIndex != -1){       
        var flag = select_body.options.length;       
        if(select_body.selectedIndex==flag-1){       
            alert("Already reached bottom!");       
            return;       
        }       
select_body[select_body.selectedIndex].parentNode.insertBefore(select_body.options[select_body.selectedIndex],select_body.options[select_body.selectedIndex+2])      
    }else       
        alert("Please select a Rule!");       
}      
  
</script>
1 楼 gyj129129 2007-11-21  
服了.....
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery 自定义select控件

    2. 创建自定义元素：使用HTML和CSS创建一个具有所需样式的模拟Select元素，例如一个按钮或下拉列表。 ```html &lt;div id="custom-select-wrapper"&gt; 请选择 ;"&gt; &lt;li data-value="option1"&gt;Option 1 ...

    JQuery实现select互换数据和上下移动

    本文将深入探讨如何使用jQuery实现一个类似Struts2中的`optiontransferselect`标签的功能，即在两个下拉框之间进行选项的互选和上下移动。 首先，我们需要了解`optiontransferselect`的基本概念。在Struts2框架中，...

    js之Select用法

    虽然`select`元素的样式化相对有限，但可以通过自定义`&lt;option&gt;`元素的`innerHTML`来实现一定程度的定制。对于更复杂的样式化，可以考虑使用JavaScript库如Chosen或Select2。 8. **使用`select`元素进行数据绑定** ...

    uniapp多选标签/多选按钮/多选框源码

    多选按钮（Multiple Select Buttons）常用于复选操作，一般表现为一组按钮，用户可以勾选多个。在`uni-app`中，可以使用`&lt;uni-checkbox-group&gt;`和`&lt;uni-checkbox&gt;`组件组合来实现。`&lt;uni-checkbox-group&gt;`作为容器，...

    重构《实现select multiple左右添加和删除功能》

    它可能包含了一个或多个JavaScript脚本，用于处理DOM操作，监听用户交互，以及在两个`&lt;select&gt;`元素之间移动选中的选项。这些脚本可能会使用事件监听器，例如`click`事件，来响应用户点击按钮的行为。同时，它们也...

    jQuery实现Select左右复制移动内容

    在本文中，我们将深入探讨如何使用jQuery来实现Select元素之间的内容复制和移动功能。这个功能在许多用户界面中都有应用，比如多选设置、数据过滤等。以下是对给定代码的详细解释和扩展： 首先，我们需要引入jQuery...

    bootstrap-select-master下拉框。

    7. **自定义样式**：通过修改 CSS 类或使用插件提供的 API，你可以定制下拉框的外观，比如按钮的大小、颜色等。 8. **本地化**：Bootstrap Select 支持多语言，你可以根据需要加载不同的语言包。 9. **API 方法**...

    select 单列组件(自己拿去修改)

    在移动设备上，原生的Select可能会显示为一个下拉按钮，这可能不符合设计师的预期。因此，开发者可能需要使用自定义组件来确保在不同设备上的呈现效果一致。 八、优化与性能 对于包含大量选项的Select，为提高性能...

    jQuery双向列表左右移动选择框代码

    这通常包括两个`&lt;select&gt;`元素，一个代表左侧的可选择项，另一个表示右侧已选择的项。此外，还需要两个按钮，一个用于向右移动选项，一个用于向左移动。 ```html &lt;select multiple id="leftSelect"&gt; &lt;!-- 左侧...

    AmazeUI 下拉选框

    如果需要支持多选，可以使用`&lt;select multiple&gt;`属性，但需要注意，AmazeUI默认不支持多选下拉的样式，可能需要自定义CSS来实现。 3. **禁用状态** 要禁用下拉选框，只需在`&lt;select&gt;`标签上添加`disabled`属性，...

    SelectBox下拉复选框多选插件

    在IT领域，尤其是在前端开发中，"SelectBox下拉复选框多选插件"是一种常用的用户界面元素，用于提供用户友好的多选项选择功能。它结合了传统的下拉列表和复选框的特性，使得在有限的空间内，用户能够方便地筛选和...

    select模拟多选下拉

    传统的HTML `&lt;select&gt;` 元素虽然支持`multiple`属性实现多选，但其样式和交互方式往往不能满足现代网页设计的需求。因此，开发者通常会通过JavaScript或者一些前端框架（如jQuery、Vue、React等）来模拟更灵活、功能...

    Jquery实现select multiple左右添加和删除功能的简单实例

    在本文中，我们将探讨如何使用jQuery实现一个基本的多选下拉列表（select multiple）功能，允许用户在两个下拉列表之间添加和删除选项。这个功能常见于需要用户分配或移动项目的场景，如分配任务、选择角色等。下面...

    JavaScript如何实现组合列表框中元素移动效果

    在提供的代码示例中，有四个按钮分别对应四种操作：将选中的元素向右移动、将所有元素向右移动、将选中的元素向左移动以及将所有元素向左移动。每个按钮的`onclick`事件都绑定了相应的移动函数。 通过这样的实现...

    jquery select多选框的左右移动 具体实现代码

    此外，还需要两个按钮，一个用于将选项从`fb_list`移动到`select_list`，另一个用于反向操作。 ```html &lt;select id="fb_list" multiple="multiple" style="text-align:center;width:300px;height:150px;"&gt;&lt;/select&gt;...

    Multiple Selection in Dropdown list.zip

    在网页设计和开发中，下拉列表（Dropdown List）是一种常见的用户界面元素，它允许用户从一组预定义的选项中进行选择。然而，传统的下拉列表通常只支持单选，即用户只能选择一个选项。但随着用户体验的提升，多选...

    左右移动下拉框插件multiselect

    "左右移动下拉框插件Multiselect"是一种用于网页交互设计的工具，它允许用户在两个下拉框之间通过拖动或点击按钮来选择和移动选项，常用于多选场景，如筛选、分类等。这个插件提高了用户体验，使得用户在处理大量可...

    jQuery实现列表框双向选择操作

    使用jQuery的选择器如`$("#selectBox1")`获取元素，然后通过`.children()`或`.find()`查找子元素，`.val()`获取或设置选中值，`.append()`添加新的选项，`.remove()`移除选项。 3. **事件绑定**： 为左侧列表框...

    下拉复选框

    4. **jQuery插件**："multiple-select-master"很可能是一个jQuery插件，用于扩展标准的`&lt;select&gt;`元素，提供多选、全选和恢复默认值等功能。插件通常会提供自己的API，比如`$("#multiSelect").multiselect({options}...

    jQuery插件 selectToSelect使用方法

    jQuery插件`selectToSelect`是一个实用的工具，主要用于在两个`&lt;select&gt;`元素之间进行交互操作，方便用户从一个选项列表中选择项并移动到另一个列表。在本例中，它被应用于报表页面的配置界面，使得用户能更有效地...

Magicbox
Global site tag (gtag.js) - Google Analytics