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 相关文章推荐
javascript中怎么做对象的类型判断
Nov 11 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
详解如何用webpack4从零开始构建react开发环境
Jan 27 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 Javascript
vue实现户籍管理系统
May 29 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移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
Python实现二叉搜索树
2016/02/03 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
农业资源与环境专业自荐信范文
2013/12/30 职场文书
服装创业计划书范文
2014/02/05 职场文书
房屋公证委托书
2014/04/03 职场文书
协议书模板
2014/04/23 职场文书
大学生励志演讲稿
2014/04/25 职场文书
长江三峡导游词
2015/01/31 职场文书
电影地道战观后感
2015/06/04 职场文书
红色革命电影观后感
2015/06/18 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
创业计划书之农家乐
2019/10/09 职场文书