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日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
JavaScript随机数的组合问题案例分析
May 16 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/10/09 PHP
详谈PHP编码转换问题
2015/07/28 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
python调用staf自动化框架的方法
2018/12/26 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
银行员工职业规划范文
2014/01/21 职场文书
咖啡馆创业计划书
2014/01/26 职场文书
个人求职信范例
2014/01/29 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
求职面试个人自我评价
2014/02/28 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
故宫导游词
2015/01/31 职场文书
银行催款通知书
2015/04/17 职场文书
我的生日感言
2015/08/03 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android