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 相关文章推荐
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
JavaScript创建对象的常用方式总结
Aug 10 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 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/10/09 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
php jsonp单引号转义
2014/11/23 PHP
yii用户注册表单验证实例
2015/12/26 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
一段实用的php验证码函数
2016/05/19 PHP
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
javascript自定义日期比较函数用法示例
2019/07/22 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
软件工程专业推荐信
2013/10/28 职场文书
有趣的广告词
2014/03/18 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
学生会招新宣传语
2015/07/13 职场文书
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers