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 相关文章推荐
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 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操作数组相关函数
2011/02/03 PHP
yii框架中的Url生产问题小结
2012/01/16 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
cakephp常见知识点汇总
2017/02/24 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
EsLint入门学习教程
2017/02/17 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
Python socket处理client连接过程解析
2020/03/18 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
python中return不返回值的问题解析
2020/07/22 Python
聊聊python中的循环遍历
2020/09/07 Python
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
Unix控制后台进程都有哪些进程
2016/09/22 面试题
银行工作检查书范文
2014/01/31 职场文书
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS