js操作select控件的几种方法


Posted in Javascript onJune 02, 2010

1判断select选项中 是否存在Value="paraValue"的Item
2向select选项中 加入一个Item
3从select选项中 删除一个Item
4删除select中选中的项
5修改select选项中 value="paraValue"的text为"paraText"
6设置select中text="paraText"的第一个Item为选中
7设置select中value="paraValue"的Item为选中
8得到select的当前选中项的value
9得到select的当前选中项的text
10得到select的当前选中项的Index
11清空select的项

======================================================================

js 代码
// 1.判断select选项中 是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect, objItemValue) {
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
isExit = true;
break;
}
}
return isExit;
}

// 2.向select选项中 加入一个Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
alert("该Item的Value值已经存在");
} else {
var varItem = new Option(objItemText, objItemValue);
objSelect.options.add(varItem);
alert("成功加入");
}
}

// 3.从select选项中 删除一个Item
function jsRemoveItemFromSelect(objSelect, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options.remove(i);
break;
}
}
alert("成功删除");
} else {
alert("该select中 不存在该项");
}
}

// 4.删除select中选中的项
function jsRemoveSelectedItemFromSelect(objSelect) {
var length = objSelect.options.length - 1;
for(var i = length; i >= 0; i--){
if(objSelect[i].selected == true){
objSelect.options[i] = null;
}
}
}

// 5.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options[i].text = objItemText;
break;
}
}
alert("成功修改");
} else {
alert("该select中 不存在该项");
}
}

// 6.设置select中text="paraText"的第一个Item为选中
function jsSelectItemByValue(objSelect, objItemText) {
//判断是否存在
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].text == objItemText) {
objSelect.options[i].selected = true;
isExit = true;
break;
}
}
//Show出结果
if (isExit) {
alert("成功选中");
} else {
alert("该select中 不存在该项");
}
}

// 7.设置select中value="paraValue"的Item为选中
function check(){
var c = document.all.objSelect;
for (var i=0;i<c.options.length ;i++ ){
if (c.options(i).value==paraValue){
c.selectedIndex =i;
}
}
}

// 8.得到select的当前选中项的value
var currSelectValue = document.all.objSelect.value;

// 9.得到select的当前选中项的text
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;

// 10.得到select的当前选中项的Index
var currSelectIndex = document.all.objSelect.selectedIndex;

// 11.清空select的项
document.all.objSelect.options.length = 0;

Javascript 相关文章推荐
JQuery 弹出框定位实现方法
Dec 02 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
Jquery升级新版本后选择器的语法问题
Jun 02 #Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
Jun 02 #Javascript
JQuery index()方法使用代码
Jun 02 #Javascript
JQuery下的Live方法和$.browser方法使用代码
Jun 02 #Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 #Javascript
一些经常会用到的Javascript检测函数
May 31 #Javascript
jquery URL参数判断,确定菜单样式
May 31 #Javascript
You might like
在PHP中读取和写入WORD文档的代码
2008/04/09 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
详解Python自建logging模块
2018/01/29 Python
python自动12306抢票软件实现代码
2018/02/24 Python
python看某个模块的版本方法
2018/10/16 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
国际会议邀请函范文
2014/01/16 职场文书
写给老婆的检讨书
2014/02/21 职场文书
餐厅总厨求职信
2014/03/04 职场文书
捐款倡议书
2014/04/14 职场文书
难忘的一课教学反思
2014/04/30 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS