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 相关文章推荐
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
判断javascript的数据类型(示例代码)
Dec 11 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
js省市区级联查询(插件版&amp;无插件版)
Mar 21 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 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 curl实现抓取302跳转后页面的示例
2014/07/04 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
javascript定时器完整实例
2015/02/10 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
jQuery 如何给Carousel插件添加新的功能
2016/04/18 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
党员思想汇报范文
2013/12/30 职场文书
课外活动总结范文
2014/07/09 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
重阳节活动总结
2014/08/27 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python