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 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 Javascript
js打造数组转json函数
Jan 14 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
jQuery选择器基础入门教程
May 10 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
原生js实现简单轮播图
Oct 26 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
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
python递归实现快速排序
2018/08/18 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
python word转pdf代码实例
2019/08/16 Python
python监控nginx端口和进程状态
2019/09/06 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
请解释在new与override的区别
2012/10/29 面试题
Java语言程序设计测试题选择题部分
2014/04/03 面试题
大学生实习思想汇报
2014/01/12 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
武当山导游词
2015/02/03 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
我的生日感言
2015/08/03 职场文书
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS