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 相关文章推荐
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
jquery对ajax的支持介绍
Dec 10 Javascript
js select option对象小结
Dec 20 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
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
初品cakephp 入门基础
2012/02/16 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
js简单时间比较的方法
2016/08/02 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
nodeJS微信分享
2017/12/20 NodeJs
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
简单分析python的类变量、实例变量
2019/08/23 Python
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
工程师求职简历的自我评价分享
2013/10/10 职场文书
护理专业自荐信
2013/12/03 职场文书
土建资料员岗位职责
2014/01/04 职场文书
劳模事迹材料范文
2014/12/24 职场文书
研究生导师推荐信
2015/03/25 职场文书
发票退票证明
2015/06/24 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP