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 相关文章推荐
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
基于prototype扩展的JavaScript常用函数库
Nov 30 Javascript
javascript 原型继承介绍
Aug 30 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
jQuery实现滚动效果
Nov 17 jQuery
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
验证用户是否修改过页面的数据的实现方法
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
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
PHP面向对象的使用教程 简单数据库连接
2006/11/25 PHP
模拟flock实现文件锁定
2007/02/14 PHP
PHP 日期时间函数的高级应用技巧
2009/10/10 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
python调用接口的4种方式代码实例
2019/11/19 Python
python使用配置文件过程详解
2019/12/28 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
工程部文员岗位职责
2015/02/04 职场文书
标枪加油稿
2015/07/22 职场文书
学习党章心得体会2016
2016/01/15 职场文书
Oracle表空间与权限的深入讲解
2021/11/17 Oracle
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript