Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)


Posted in Javascript onDecember 19, 2008

1判断select选项中 是否存在Value="paraValue"的Item
2向select选项中 加入一个Item
3从select选项中 删除一个Item
4删除select中选中的项
5修改select选项中 value="paraValue"的text为"paraText"
6设置select中text="paraText"的第一个Item为选中
7设置select中value="paraValue"的Item为选中
8得到select的当前选中项的value
9得到select的当前选中项的text
10得到select的当前选中项的Index
11清空select的项
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常用排序实现代码
Dec 28 Javascript
ajax与302响应代码测试
Oct 23 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
详解vue组件基础
May 04 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 Javascript
简单通用的JS滑动门代码
Dec 19 #Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 #Javascript
Javascript 获取LI里的内容
Dec 17 #Javascript
FLASH 广告之外的链接
Dec 16 #Javascript
用tip解决Ext列宽度不够的问题
Dec 13 #Javascript
兼容ie和firefox js关闭代码
Dec 11 #Javascript
IE和Firefox下javascript的兼容写法小结
Dec 10 #Javascript
You might like
第九节 绑定 [9]
2006/10/09 PHP
mysql5写入和读出乱码解决
2006/11/25 PHP
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
php 操作调试的方法
2012/07/12 PHP
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
python模拟enum枚举类型的方法小结
2015/04/30 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
快速了解Python开发环境Spyder
2020/06/29 Python
企业厂长岗位职责
2013/12/17 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
1亿有多大教学反思
2014/05/01 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
民间借贷被告代理词
2015/05/23 职场文书
php双向队列实例讲解
2021/11/17 PHP
介绍一下28个JS常用数组方法
2022/05/06 Javascript