Javascript Select操作大集合


Posted in Javascript onMay 26, 2009

其实这本书一直都在我的电脑里,只是没认真看过。一直没怎么很正式的学习过javascript,偶尔用到的时候就到网上找些代码,改吧改吧就用了,这次从头开始学起,细细看下来,还真是有不少收获,甚至有点喜欢上javascript了。
现在步入正题,看到书中讲Form元素的操作,像Textbox、Button、Label等,都还是比较简单的,只是看到Select时,稍微有些复杂,于是就想仔细研究研究,于是就有了这篇文章。Select的操作包括动态添加、删除、移动、获取选中项的值、排序等等,现在一一讲述。
1、向Select里添加Option

//IE only,FF不支持Add方法 
function fnAddItem(text,value) 
{ 
var selTarget = document.getElementById("selID"); 
selTarget.Add(new Option("text","value")); 
} 
//IE FF both OK 
function fnAdd(oListbox, sName, sValue) 
{ 
var oOption = document.createElement("option"); 
oOption.appendChild(document.createTextNode(sName)); 
if (arguments.length == 3) 
{ 
oOption.setAttribute("value", sValue); 
} 
oListbox.appendChild(oOption); 
}

2、删除Select里的Option
function fnRemoveItem() 
{ 
var selTarget = document.getElementById("selID"); 
if(selTarget.selectedIndex > -1) 
{//说明选中 
for(var i=0;i<selTarget.options.length;i++) 
{ 
if(selTarget.options[i].selected) 
{ 
selTarget.remove(i); 
i = i - 1;//注意这一行 
} 
} 
} 
}

3、移动Select里的Option到另一个Select中
function fnMove(fromSelectID,toSelectID) 
{ 
var from = document.getElementById(fromSelectID); 
var to = document.getElementById(toSelectID); 
for(var i=0;i<from.options.length;i++) 
{ 
if(from.options[i].selected) 
{ 
to.appendChild(from.options[i]); 
i = i - 1; 
} 
} 
}

if 里的代码也可用下面几句代码代替
var op = from.options[i]; 
to.options.add(new Option(op.text, op.value)); 
from.remove(i);

4、Select里Option的上下移动
function fnUp() 
{ 
var sel = document.getElementById("selID"); 
for(var i=1; i < sel.length; i++) 
{//最上面的一个不需要移动,所以直接从i=1开始 
if(sel.options[i].selected) 
{ 
if(!sel.options.item(i-1).selected) 
{//上面的一项没选中,上下交换 
var selText = sel.options[i].text; 
var selValue = sel.options[i].value; 
sel.options[i].text = sel.options[i-1].text; 
sel.options[i].value = sel.options[i-1].value; 
sel.options[i].selected = false; 
sel.options[i-1].text = selText; 
sel.options[i-1].value = selValue; 
sel.options[i-1].selected=true; 
} 
} 
} 
}

在进行上下两项互换时,也可以使用以下代码,但是效率很低,因为每一次的Dom操作都将导致整个页面的重新布局,所以不如直接修改元素的属性值。
var oOption = sel.options[i] 
var oPrevOption = sel.options[i-1] 
sel.insertBefore(oOption,oPrevOption);

向下移动同理
function fnDown() 
{ 
var sel = fnGetTarget("selLeftOrRight"); 
for(var i=sel.length -2; i >= 0; i--) 
{//向下移动,最后一个不需要处理,所以直接从倒数第二个开始 
if(sel.options.item(i).selected) 
{ 
if(!sel.options.item(i+1).selected) 
{//下面的Option没选中,上下互换 
var selText = sel.options.item(i).text; 
var selValue = sel.options.item(i).value; 
sel.options.item(i).text = sel.options.item(i+1).text; 
sel.options.item(i).value = sel.options.item(i+1).value; 
sel.options.item(i).selected = false; 
sel.options.item(i+1).text = selText; 
sel.options.item(i+1).value = selValue; 
sel.options.item(i+1).selected=true; 
} 
} 
} 
}

5、Select里Option的排序
这里借助Array对象的sort方法进行操作,sort方法接受一个function参数,可以在这个function里定义排序时使用的算法逻辑。
array.sort([compareFunction]) 里compareFunction接受两个参数(p1,p2),sort操作进行时,array对象会每次传两个值进去,进行比较;compareFunciton必须返回一个整数值:当返回值>0时,p1会排在p2后面;返回值<0时,p1会排在p2前面;返回值=0时,不进行操作。
例如:
function fnCompare(a,b) 
{ 
if (a < b) 
return -1; 
if (a > b) 
return 1; 
return 0; 
} 
var arr = new Array(); 
//add some value into arr 
arr.sort(fnCompare); 
//这里sort的操作结果就是arr里的项按由小到大的升序排序 
//如果把fnCompare里改为 
//if (a < b) 
// return 1; 
//if (a > b) 
// return -1; 
//return 0; 
//则sort的结果是降序排列 
好,下面就是对Select里Option的排序 
//因为排序可以按Option的Value排序,也可以按Text排序,这里只演示按Value排序 
function sortItem() 
{ 
var sel = document.getElementById("selID"); 
var selLength = sel.options.length; 
var arr = new Array(); 
var arrLength; 
//将所有Option放入array 
for(var i=0;i<selLength;i++) 
{ 
arr[i] = sel.options[i]; 
} 
arrLength = arr.length; 
arr.sort(fnSortByValue);//排序 
//先将原先的Option删除 
while(selLength--) 
{ 
sel.options[selLength] = null; 
} 
//将经过排序的Option放回Select中 
for(i=0;i<arrLength;i++) 
{ 
fnAdd(sel,arr[i].text,arr[i].value); 
//sel.add(new Option(arr[i].text,arr[i].value)); 
} 
} 
function fnSortByValue(a,b) 
{ 
var aComp = a.value.toString(); 
var bComp = b.value.toString(); 
if (aComp < bComp) 
return -1; 
if (aComp > bComp) 
return 1; 
return 0; 
}

排序时还可以有更多选项,比如将value值看做Integer或是String进行排序,得到的结果是不一样的。篇幅限制,不在多做介绍。
我将这些所有的操作都写在了一个文件里,运行的效果如图
Javascript Select操作大集合
Javascript 相关文章推荐
jQuery 页面载入进度条实现代码
Feb 08 Javascript
Javascript 兼容firefox的一些问题
May 21 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 Javascript
vue监听键盘事件的相关总结
Jan 29 Vue.js
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 #Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 #Javascript
jQuery 图像裁剪插件Jcrop的简单使用
May 22 #Javascript
document.compatMode介绍
May 21 #Javascript
各种常用浏览器getBoundingClientRect的解析
May 21 #Javascript
简单的js分页脚本
May 21 #Javascript
input+select(multiple) 实现下拉框输入值
May 21 #Javascript
You might like
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
PHP写日志的实现方法
2014/11/05 PHP
Laravel 5 学习笔记
2015/03/06 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
一些不错的js函数ajax
2008/08/20 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
jQuery判断指定id的对象是否存在的方法
2015/05/22 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
python3+PyQt5使用数据库表视图
2018/04/24 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
Python flask框架post接口调用示例
2019/07/03 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
汽车队司机先进事迹材料
2014/02/01 职场文书
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python