js操作select控件的几种方法


Posted in Javascript onJune 02, 2010

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为选中
function check(){
var c = document.all.objSelect;
for (var i=0;i<c.options.length ;i++ ){
if (c.options(i).value==paraValue){
c.selectedIndex =i;
}
}
}

// 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 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
Angular4 反向代理Details实践
May 30 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 Javascript
Jquery升级新版本后选择器的语法问题
Jun 02 #Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
Jun 02 #Javascript
JQuery index()方法使用代码
Jun 02 #Javascript
JQuery下的Live方法和$.browser方法使用代码
Jun 02 #Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 #Javascript
一些经常会用到的Javascript检测函数
May 31 #Javascript
jquery URL参数判断,确定菜单样式
May 31 #Javascript
You might like
php正则
2006/07/07 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
python opencv之SIFT算法示例
2018/02/24 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
单位介绍信范文
2014/01/18 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
小学新教师培训方案
2014/02/03 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
就业推荐表院系意见
2015/06/05 职场文书
推广普通话主题班会
2015/08/17 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
Vue vee-validate插件的简单使用
2021/06/22 Vue.js
Python如何让字典保持有序排列
2022/04/29 Python
mysql查看表结构的三种方法总结
2022/07/07 MySQL