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 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
jquery UI 1.72 之datepicker
Dec 29 Javascript
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
js星星评分效果
Jul 24 Javascript
javascript常见操作汇总
Sep 03 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
验证用户是否修改过页面的数据的实现方法
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
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
PHP分享图片的生成方法
2018/04/25 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
python实现定时提取实时日志程序
2018/06/22 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
Pyqt5实现英文学习词典
2019/06/24 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
机修工工作职责
2014/02/21 职场文书
北京申奥口号
2014/06/19 职场文书
员工年终自我评价
2014/09/14 职场文书
医院领导班子整改方案
2014/10/01 职场文书
房屋授权委托书范本
2014/10/07 职场文书
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
为Centos安装指定版本的Docker
2022/04/01 Servers