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 动态修改样式和层叠样式表代码
Apr 27 Javascript
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
vue.js 2.0实现简单分页效果
Jul 29 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
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
php下删除字符串中HTML标签的函数
2008/08/27 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
php车辆违章查询数据示例
2016/10/14 PHP
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python关于__name__属性的含义和作用详解
2020/02/19 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
python实现文法左递归的消除方法
2020/05/22 Python
django创建css文件夹的具体方法
2020/07/31 Python
简述python Scrapy框架
2020/08/17 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
帕克纽约:PARKER NY
2018/12/09 全球购物
技术总监个人的自我评价范文
2013/12/18 职场文书
yy司仪主持词
2014/03/22 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
2014年环保工作总结
2014/11/26 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
SpringBoot 集成Redis 过程
2021/06/02 Redis