写JS脚本最烦心之处莫过于由于浏览器标准不统一导致的程序复杂性,现在,尽管已经有很多AJAX框架对各种浏览器的区分都做了封装,但现实中一些小问题的处理上,考虑使用这些东西似乎不太现实。这几天,刚好需要做一个小小的demo页面其中有些东西刚好可以写出来以备后用。
需求如下:
1.现有一select框,代码如下:
xml 代码
- <select name="hasitem" multiple size=19>
- <option selected>t-mobile game restrictionsoption>
- <option> ======</option>
- <option>gdsfgdsfgdsg</option>
- <option>q2432342rewe432</option>
- <option>2dfaesr34option>
- <option>t-mobile game restrictions</option>
- <option>436t43ret4343option>
- <option>t-mobile game restrictions</option>
- <option>545435353453</option>
- <option>t-mobile game restrictions</option>
- <option>fdsgdggtrgreg</option>
- <option>t-mobile game restrictions</option>
- <option>5756432534543</option>
- <option>t-mobile game restrictions</option>
- <option>ggfy456454343</option>
- <option>t-mobile game restrictions</option>
- </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标准。反正也无所谓了,再写一个浏览器判断的方法问题解决。