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 相关文章推荐
JavaScript语句可以不以;结尾的烦恼
Mar 08 Javascript
JavaScript 实现??打印?理
Apr 28 Javascript
Javascript 判断Flash是否加载完成的代码
Apr 12 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
使用Cargo工具高效创建Rust项目
Aug 14 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
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
在PHP中使用redis
2013/11/04 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
JS FormData上传文件的设置方法
2017/07/05 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
python避免死锁方法实例分析
2015/06/04 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
基于Django统计博客文章阅读量
2019/10/29 Python
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
公司经理聘任书
2014/03/29 职场文书
小学新学期寄语
2014/04/02 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
小学大队委竞选口号
2015/12/25 职场文书
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
yolov5返回坐标的方法实例
2022/03/17 Python
Java死锁的排查
2022/05/11 Java/Android