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通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
js 监控iframe URL的变化实例代码
Jul 12 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
详解javascript函数写法大全
Mar 25 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 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
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
php木马webshell扫描器代码
2012/01/25 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
vue elementui form表单验证的实现
2018/11/11 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
python中stdout输出不缓存的设置方法
2014/05/29 Python
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
不用游标的SQL语句有哪些
2012/09/07 面试题
打架检讨书400字
2014/01/17 职场文书
工厂车间标语
2014/06/19 职场文书
2019各种承诺书范文
2019/06/24 职场文书
Mysql Show Profile
2021/04/05 MySQL