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 - 如何引入js代码
Mar 09 Javascript
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
通过js修改input、select默认字体颜色
Apr 19 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 Javascript
实现vuex原理的示例
Oct 21 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下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
JS跨域总结
2012/08/30 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
Python通过poll实现异步IO的方法
2015/06/04 Python
Python subprocess模块常见用法分析
2018/06/12 Python
简单了解python关系(比较)运算符
2019/07/08 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
成人毕业生自我鉴定
2013/10/18 职场文书
运动会邀请函范文
2014/02/06 职场文书
会务接待方案
2014/02/27 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
简历自荐信范文
2015/03/09 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
公路施工安全责任书
2015/05/08 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers