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限制文本框只能输入数字和字母方法
Feb 28 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
javascript实现商品图片放大镜
Nov 28 Javascript
JavaScript中CreateTextFile函数
Aug 30 Javascript
ztree+ajax实现文件树下载功能
May 18 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 nl2br()格式化输出的详解
2013/06/05 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
vue实现登陆登出的实现示例
2017/09/15 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
Python数据操作方法封装类实例
2017/06/23 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
css3教程之倾斜页面
2014/01/27 HTML / CSS
网络方面基础面试题
2012/11/16 面试题
专科应届生求职信
2013/11/24 职场文书
个人教师自我评价范文
2013/12/02 职场文书
生产班组长岗位职责
2014/01/05 职场文书
爱护公物演讲稿
2014/09/09 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
企业党支部工作总结2015
2015/05/21 职场文书