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中原型继承中的一点思考
Jul 25 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
动态添加删除表格行的js实现代码
Feb 28 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
微信小程序支付之c#后台实现方法
Oct 19 Javascript
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
jQuery弹框插件使用方法详解
May 26 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
PHP动态变静态原理
2006/11/25 PHP
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
js实现车辆管理系统
2020/08/26 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
Python中的文件和目录操作实现代码
2011/03/13 Python
Python实现登录接口的示例代码
2017/07/21 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
西安交大自主招生自荐信
2014/01/27 职场文书
进口业务员岗位职责
2014/04/06 职场文书
销售口号大全
2014/06/11 职场文书
2014年减负工作总结
2014/12/10 职场文书
2016学校先进集体事迹材料
2016/02/29 职场文书
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers