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 网页水印(非图片水印)实现代码
Mar 01 Javascript
javascript鼠标滑动评分控件完整实例
May 13 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
JS实现音乐导航特效
Jan 06 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
PHP7数组的底层实现示例
2019/08/25 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
jquery提升性能最佳实践小结
2010/12/06 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
Python实现批量转换文件编码的方法
2015/07/28 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
天猫精选:上天猫,就够了
2016/09/21 全球购物
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
小学红领巾中秋节广播稿
2014/01/13 职场文书
决心书标准格式
2014/03/11 职场文书
处罚决定书范文
2015/06/24 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技
python如何读取和存储dict()与.json格式文件
2022/06/25 Python