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学习资源站点
Aug 29 Javascript
ajax与302响应代码测试
Oct 23 Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
js自定义input文件上传样式
Oct 26 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 Javascript
聊聊JS ES6中的解构
Apr 29 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 动态多文件上传
2009/01/18 PHP
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
PHP加密解密类实例代码
2016/07/20 PHP
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
Python 的 Socket 编程
2015/03/24 Python
python中set常用操作汇总
2016/06/30 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
应届生自荐信
2014/06/30 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
员工工作能力评语
2014/12/31 职场文书
浅谈如何保证Mysql主从一致
2022/03/13 MySQL
windows server2008 开启端口的实现方法
2022/06/25 Servers