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 相关文章推荐
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
js两行代码按指定格式输出日期时间
Oct 21 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
jquery得到font-size属性值实现代码
Sep 30 Javascript
JQuery教学之性能优化
May 14 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 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
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
php文件上传类的分享
2017/07/06 PHP
Javascript读取cookie函数代码
2010/10/16 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
python 字符串和整数的转换方法
2018/06/25 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
用python做游戏的细节详解
2019/06/25 Python
详解Scrapy Redis入门实战
2020/11/18 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
小学生开学第一课活动方案
2014/03/27 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
安全生产月宣传标语
2014/10/06 职场文书
2014年学生会工作总结
2014/11/07 职场文书
满月酒邀请函
2015/01/30 职场文书
贫困证明书范文
2015/06/16 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
python前后端自定义分页器
2022/04/13 Python