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效率调优经验
Jun 04 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
小程序点击图片实现png转jpg
Oct 22 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 session应用实例 登录验证
2009/03/16 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
认识延迟时间为0的setTimeout
2008/05/16 Javascript
Ext 表单布局实例代码
2009/04/30 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
JavaScript作用域链实例详解
2019/01/21 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
python 简单的调用有道翻译
2020/11/25 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
大学生毕业自我评价范文分享
2013/11/11 职场文书
2014年节能工作总结
2014/12/18 职场文书
投标承诺函范文
2015/01/21 职场文书
写给医生的感谢信
2015/01/22 职场文书
矛盾论读书笔记
2015/06/29 职场文书
2015中秋祝酒词
2015/08/12 职场文书