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中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
JS解决url传值出现中文乱码的另类办法
Apr 08 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 Javascript
让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接口中interface存在的意义
2013/06/27 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
js中less常用的方法小结
2017/08/09 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
python如何快速拼接字符串
2020/10/28 Python
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
客服主管岗位职责
2013/12/13 职场文书
单位领导证婚词
2014/01/14 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
五一手机促销方案
2014/03/08 职场文书
个人工作主要事迹
2014/05/08 职场文书
师德师风承诺书
2014/05/23 职场文书
温馨提示标语
2014/06/26 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL