js select常用操作控制代码


Posted in Javascript onMarch 16, 2010

// 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 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
使用node.JS中的url模块解析URL信息
Feb 06 Javascript
基于JavaScript实现十五拼图代码实例
Apr 26 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
js实现的日期操作类DateTime函数代码
Mar 16 #Javascript
javascript json2 使用方法
Mar 16 #Javascript
jQuery 选择器理解
Mar 16 #Javascript
jQuery 学习入门篇附实例代码
Mar 16 #Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 #Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 #Javascript
javascript 二维数组的实现与应用
Mar 16 #Javascript
You might like
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
PHP递归算法的简单实例
2019/02/28 PHP
javascript取消文本选定的实现代码
2010/11/14 Javascript
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
python list元素为tuple时的排序方法
2018/04/18 Python
python3.7.0的安装步骤
2018/08/27 Python
django 将model转换为字典的方法示例
2018/10/16 Python
Python判断有效的数独算法示例
2019/02/23 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
Python序列类型的打包和解包实例
2019/12/21 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
《夸父追日》教学反思
2014/02/26 职场文书
个人租房协议书范本
2014/09/30 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
营销计划书范文
2015/01/17 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
结婚幸福感言
2015/08/01 职场文书
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android