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 相关文章推荐
三级下拉菜单的js实现代码
May 23 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
小程序自定义圆形进度条
Nov 17 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
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
PHP 函数语法介绍一
2009/06/14 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
php浏览历史记录的方法
2015/03/10 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
使用JavaScript switch case 另类写法
2010/03/14 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
js+css3实现简单时钟特效
2020/09/13 Javascript
跟老齐学Python之用while来循环
2014/10/02 Python
Python导入txt数据到mysql的方法
2015/04/08 Python
详解Python中time()方法的使用的教程
2015/05/22 Python
python实用代码片段收集贴
2015/06/03 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
简单了解python中的与或非运算
2019/09/18 Python
python中的itertools的使用详解
2020/01/13 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
python语言中有算法吗
2020/06/16 Python
办理护照介绍信
2014/01/16 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS