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 DIV弹出效果实现代码
Jul 03 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
vue resource发送请求的几种方式
Sep 30 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一些有意思的小区别
2006/12/06 PHP
两个强悍的php 图像处理类1
2009/06/15 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
Python 深入理解yield
2008/09/06 Python
Python程序语言快速上手教程
2012/07/18 Python
基python实现多线程网页爬虫
2015/09/06 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
工程资料员岗位职责
2014/03/10 职场文书
2014年体育部工作总结
2014/11/13 职场文书
2014年营销工作总结
2014/11/22 职场文书
助学感谢信范文
2015/01/21 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
新学期开学标语2015
2015/07/16 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js
Python读写yaml文件
2022/03/20 Python
redis 解决库存并发问题实现数量控制
2022/04/08 Redis