写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标准。反正也无所谓了,再写一个浏览器判断的方法问题解决。
相关推荐
多选框要用到的js multiple-Select.js 用的时候引用到文件中
实现select下拉框多选功能原码包,这是我从原网站下载的
jQuery multiple-select-master 插件
前端项目-multiple-select,multiple select是一个jquery插件,用于使用复选框()选择多个元素。
使用multiple可以实现select多选,本例将为大家介绍下select多选 multiple的使用,新手朋友们可以学习下
多选框要用到的css 用的时候引用到文件里multiple-Select.css
jquery.multiple.select.js
select 元素 select 元素 select 元素 01 select 元素 select控件提供下拉列表选项,供用户进行选择。下拉框通过select标记和option标记来定义。例如,在用户注册表单中,职业的选择项就使用下拉列表实现。 描述 ...
是一个小巧的jQuery插件,用于使用multiple属性自定义选择。 select-multiple-rails gem将select-multiple与Rails资产管道集成在一起。 用法 安装select-multi-rails gem 在Gemfile中包含select-multiple-rails ...
python库。 资源全名:multiple_select_widget-0.1.0-py2.py3-none-any.whl
html下拉多选框样式,h5下拉多选框整套样式,用layui实现下拉框select多选,取值 layui 多选下拉框 控件 整套样式
jQuery Multiple Select实现下拉框多选,请注意是Multiple 。实例介绍详细,想用的可以直接Copy进去用
select_multiple三级分类级联,访淘宝发布商品级联,和网上的完全不一样,下载就能用。
select标签multiple属性的使用方法.zip 欢迎下载
react-native-multiple-select, react的简单多选择组件 react-native-multiple-select 简单的多选择组件,用于响应本机( 用于本机响应的Select2 ) 。 重要通知我最近忙于工作和其他项目,我真的没有足够的时间来投入...
使用multiple可以实现select多选,本例将为大家介绍下select多选 multiple的使用,新手朋友们可以学习下
npm install multiple-select-modified 与原始版本相比的变化 新的多选选项: okButton布尔标志,设置后将在列表的末尾添加一个“确定”按钮,以方便用户关闭窗口 还添加了okButtonText来更改语言环境 进行了代码...