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 相关文章推荐
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
jquery 学习之二 属性相关
Nov 23 Javascript
Javascript计算时间差的函数分享
Jul 04 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 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
mysql建立外键
2006/11/25 PHP
Cannot modify header information错误解决方法
2008/10/08 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
PHP计数器的实现代码
2013/06/08 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
Python 返回汉字的汉语拼音
2009/02/27 Python
Python函数中定义参数的四种方式
2014/11/30 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
Django框架模板的使用方法示例
2019/05/25 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
新手学python应该下哪个版本
2020/06/11 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
高中化学教学反思
2014/01/13 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python