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 相关文章推荐
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
jquery css实现流程进度条
Mar 26 jQuery
JS实现页面侧边栏效果探究
Jan 08 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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
php 数组的创建、调用和更新实现代码
2009/03/09 PHP
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
php ftp文件上传函数(基础版)
2010/06/03 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
js分页之前端代码实现和请求处理
2017/08/04 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
django如何实现视图重定向
2019/07/24 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
python绘制高斯曲线
2021/02/19 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
本科毕业生求职自荐信
2014/04/09 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
政协委员个人总结
2015/03/03 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python