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 的Document属性和方法集合
Jan 25 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
简单通用的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类中Static方法效率测试代码
2010/10/17 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
js微信支付实现代码
2016/12/22 Javascript
如何选择适合你的JavaScript框架
2017/11/20 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
ES6函数实现排它两种写法解析
2020/05/13 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
python实现淘宝购物系统
2019/10/25 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
怎么写有吸引力的自荐信
2013/11/17 职场文书
中专生自我鉴定书范文
2013/12/28 职场文书
化学教师教学反思
2014/01/17 职场文书
大队干部竞选演讲稿
2014/04/28 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers