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 相关文章推荐
JavaScript 空位补零实现代码
Feb 26 Javascript
javascript中字符串拼接需注意的问题
Jul 13 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 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 str_pad 函数使用详解
2009/01/13 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
javascript 常用代码技巧大收集
2009/02/25 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
几种响应式文字详解
2017/05/19 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
Python使用gRPC传输协议教程
2018/10/16 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
Java里面有没有全局变量?为什么?
2015/02/06 面试题
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
电子商务专业推荐信范文
2013/12/02 职场文书
考博专家推荐信模板
2013/12/02 职场文书
高中班长自我鉴定
2013/12/20 职场文书
拖鞋店创业计划书
2014/01/15 职场文书
运动会稿件100字
2014/02/21 职场文书
环保口号大全
2014/06/12 职场文书
治庸问责心得体会
2014/09/12 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python
python实现手机推送 代码也就10行左右
2022/04/12 Python