Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]


Posted in Javascript onSeptember 26, 2008

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为选中
document.all.objSelect.value = objItemValue;

// 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 相关文章推荐
两种不同的方法实现js对checkbox进行全选和反选
May 13 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
Uploadify上传文件方法
Mar 16 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
微信小程序实现左滑删除效果
Nov 18 Javascript
javascript代码简写的几种常用方式汇总
Aug 23 Javascript
验证用户是否修改过页面的数据的实现方法
Sep 26 #Javascript
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 #Javascript
js每次Title显示不同的名言
Sep 25 #Javascript
Js动态创建div
Sep 25 #Javascript
自己开发Dojo的建议框架
Sep 24 #Javascript
Discuz! 6.1_jQuery兼容问题
Sep 23 #Javascript
javascript的trim,ltrim,rtrim自定义函数
Sep 21 #Javascript
You might like
php中函数的形参与实参的问题说明
2010/09/01 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
JSON 数据格式详解
2017/09/13 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
导致python中import错误的原因是什么
2020/07/01 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
绝对经典成功的大学生推荐信
2013/11/08 职场文书
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
师范院校学生自荐信范文
2013/12/27 职场文书
教师试用期自我鉴定
2014/02/12 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
建国大业电影观后感
2015/06/01 职场文书
教师培训简讯
2015/07/20 职场文书
大学生党课感想
2015/08/11 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang
ztree+ajax实现文件树下载功能
2021/05/18 Javascript