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 相关文章推荐
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
Vue异步加载about组件
Oct 31 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
Javascript实现关闭广告效果
Jan 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通用检测函数集合
2006/11/25 PHP
PHP syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
Python 26进制计算实现方法
2015/05/28 Python
python修改字典内key对应值的方法
2015/07/11 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
python中的&amp;&amp;及||的实现示例
2019/08/07 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
完美主义个人的自我评价
2014/02/17 职场文书
地理教师岗位职责
2014/03/16 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
起诉状范本
2015/05/20 职场文书
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript
table不让td文字溢出操作方法
2022/12/24 HTML / CSS