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 相关文章推荐
JavaScript中this关键字使用方法详解
Mar 08 Javascript
用JQuery调用Session的实现代码
Oct 29 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
vue数据双向绑定的注意点
Jun 23 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 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 和 XML: 使用expat函数(三)
2006/10/09 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
详解PHP中的PDO类
2015/07/06 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
Python中的自省(反射)详解
2015/06/02 Python
用Django写天气预报查询网站
2018/10/21 Python
基于Pytorch SSD模型分析
2020/02/18 Python
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
深圳茁壮笔试题
2015/05/28 面试题
优秀语文教师事迹
2014/05/18 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
高中教师个人总结
2015/02/10 职场文书
小孩不笨观后感
2015/06/03 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
python opencv通过4坐标剪裁图片
2021/06/05 Python
nginx服务器的下载安装与使用详解
2021/08/02 Servers
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS