javascript对下拉列表框(select)的操作
- <form id="f">
- <select size="1" name="s">
- <option value="www.dwww.cn">设计家园</option>
- <option value="baidu.com">百度</option>
- </select>
- </form>
- ---------------------------------------------------------------------------
- <script type="text/javascript">
- <!--
- var f = document.getElementById("f");
- //获得select列表项数目
- document.write(f.s.options.length);
- document.write(f.s.length);
- //当前选中项的下标(从0 开始)(有两种方法)
- //如果选择了多项,则返回第一个选中项的下标
- document.write(f.s.options.selectedIndex);
- document.write(f.s.selectedIndex);
- //检测某一项是否被选中
- document.write(f.s.options[0].selected);
- //获得某一项的值和文字
- document.write(f.s.options[0].value);
- document.write(f.s.options[1].text);
- //删除某一项
- f.s.options[1] = null;
- //追加一项
- f.s.options[f.s.options.length] = new Option("追加的text", "追加的value");
- //更改一项
- f.s.options[1] = new Option("更改的text", "更改的value");
- //也可以直接设置该项的 text 和 value
- //-->
- </script>
- //全选列表中的项
- function SelectAllOption(list)
- {
- for (var i=0; i<list.options.length; i++)
- {
- list.options[i].selected = true;
- }
- }
- //反选列表中的项
- function DeSelectOptions(list)
- {
- for (var i=0; i<list.options.length; i++)
- {
- list.options[i].selected = !list.options[i].selected;
- }
- }
- //返回列表中选择项数目
- function GetSelectedOptionsCnt(list)
- {
- var cnt = 0;
- var i = 0;
- for (i=0; i<list.options.length; i++)
- {
- if (list.options[i].selected)
- {
- cnt++;
- }
- }
- return cnt;
- }
- //清空列表
- function ClearList(list)
- {
- while (list.options.length > 0)
- {
- list.options[0] = null;
- }
- }
- //删除列表选中项
- //返回删除项的数量
- function DelSelectedOptions(list)
- {
- var i = 0;
- var deletedCnt = 0;
- while (i < list.options.length)
- {
- if (list.options[i].selected)
- {
- list.options[i] = null;
- deletedCnt++;
- }
- else
- {
- i++;
- }
- }
- return deletedCnt;
- }
- //此函数查找相应的项是否存在
- //repeatCheck是否进行重复性检查
- //若为"v",按值进行重复值检查
- //若为"t",按文字进行重复值检查
- //若为"vt",按值和文字进行重复值检查
- //其它值,不进行重复性检查,返回false
- function OptionExists(list, optText, optValue, repeatCheck)
- {
- var i = 0;
- var find = false;
- if (repeatCheck == "v")
- {
- //按值进行重复值检查
- for (i=0; i<list.options.length; i++)
- {
- if (list.options[i].value == optValue)
- {
- find = true;
- break;
- }
- }
- }
- else if (repeatCheck == "t")
- {
- //按文字进行重复检查
- for (i=0; i<list.options.length; i++)
- {
- if (list.options[i].text == optText)
- {
- find = true;
- break;
- }
- }
- }
- else if (repeatCheck == "vt")
- {
- //按值和文字进行重复检查
- for (i=0; i<list.options.length; i++)
- {
- if ((list.options[i].value == optValue) && (list.options[i].text == optText))
- {
- find = true;
- break;
- }
- }
- }
- return find;
- }
- //向列表中追加一个项
- //list 是要追加的列表
- //optText 和 optValue 分别表示项的文字和值
- //repeatCheck 是否进行重复性检查,参见 OptionExists
- //添加成功返回 true,失败返回 false
- function AppendOption(list, optText, optValue, repeatCheck)
- {
- if (!OptionExists(list, optText, optValue, repeatCheck))
- {
- list.options[list.options.length] = new Option(optText, optValue);
- return true;
- }
- else
- {
- return false;
- }
- }
- //插入项
- //index 插入位置,当插入位置 >= 列表现有项数量时,其作用相当于不进行重复检查的追加项
- //optText 和 optValue 分别表示项的文字和值
- function InsertOption(list, index, optText, optValue)
- {
- var i = 0;
- for (i=list.options.length; i>index; i--)
- {
- list.options[i] = new Option(list.options[i-1].text, list.options[i-1].value);
- }
- list.options[index] = new Option(optText, optValue);
- }
- //将一个列表中的项导到另一个列表中
- //repeatCheck是否进行重复性检查,参见OptionExists
- //deleteSource项导到目标后,是否删除源列表中的项
- //返回影响的项数量
- function ListToList(sList, dList, repeatCheck, deleteSource)
- {
- //所影响的行数
- var lines = 0;
- var i = 0;
- while (i<sList.options.length)
- {
- if (sList.options[i].selected && AppendOption(dList, sList.options[i].text, sList.options[i].value, repeatCheck))
- {
- //添加成功
- lines++;
- if (deleteSource)
- {
- //删除源列表中的项
- sList.options[i] = null;
- }
- else
- {
- i++;
- }
- }
- else
- {
- i++;
- }
- }
- return lines;
- }
- //列表中选中项上移
- function MoveSelectedOptionsUp(list)
- {
- var i = 0;
- var value = "";
- var text = "";
- for (i=0; i<(list.options.length-1); i++)
- {
- if (!list.options[i].selected && list.options[i+1].selected)
- {
- value = list.options[i].value;
- text = list.options[i].text;
- list.options[i] = new Option(list.options[i+1].text, list.options[i+1].value);
- list.options[i].selected = true;
- list.options[i+1] = new Option(text, value);
- }
- }
- }
- //列表中选中项下移
- function MoveSelectedOptionsDown(list)
- {
- var i = 0;
- var value = "";
- var text = "";
- for (i=list.options.length-1; i>0; i--)
- {
- if (!list.options[i].selected && list.options[i-1].selected)
- {
- value = list.options[i].value;
- text = list.options[i].text;
- list.options[i] = new Option(list.options[i-1].text, list.options[i-1].value);
- list.options[i].selected = true;
- list.options[i-1] = new Option(text, value);
- }
- }
- }
转载于:https://www.cnblogs.com/yanghj010/p/5109699.html
javascript对下拉列表框(select)的操作相关推荐
- java 下拉列表监听_javascript对下拉列表框(select)的操作
asp学习网 百度 --------------------------------------------------------------------------- //全选列表中的项 func ...
- 【JavaScript脚本】——T2事件操作
[JavaScript脚本]--T2事件操作 自定义函数 function 函数名 ( 参数1,参数2){ 执行语句 } function fun(obj){return obj; } 函数的使用 可 ...
- JQUERY对RADIO,CHECKBOX,SELECT的操作常用方法大全
JQUERY对RADIO,CHECKBOX,SELECT的操作 ******************************************************************** ...
- select标签操作 select2使用详解
select标签操作 select2使用详解 官网: https://select2.github.io/examples.html 引用: <link href="~/Scripts ...
- js获得html下拉框的值,JavaScript如何获取select下拉框中第一个值
本文主要和大家介绍JavaScript实现获取select下拉框中第一个值的方法,涉及javascript针对页面元素属性的相关获取操作技巧,需要的朋友可以参考下,希望能帮助到大家. 1.说明 获取s ...
- 轻量函数式 JavaScript:八、列表操作
你在前一章闭包/对象的兔子洞中玩儿的开心吗?欢迎回来! 如果你能做很赞的事情,那就反复做. 我们在本书先前的部分已经看到了对一些工具的简要引用,现在我们要非常仔细地看看它们,它们是 map(..).f ...
- Javascript实例:Select的OnChange()事件
Javascript实例:Select的OnChange()事件 我们用Select的onchange事件时,常会遇到这样一个问题,那就是连续选相同一项时,不触发onchange事件.你得有Chang ...
- JavaScript如何实现字符串拼接操作
实际应用中,目标字符串的生成可能需要多个数据的拼接. 由于应用频繁,几乎是所有编程语言都必须掌握的操作,当然每种语言具有各自特点. 本文将通过代码实例详细介绍一下JavaScript如何实现字符串拼接 ...
- JavaScript中常见的字符串操作函数及用法汇总
转载地址:http://www.jb51.net/article/65358.htm 这篇文章主要介绍了JavaScript中常见的字符串操作函数及用法,实例汇总了javascript常见的字符串转换 ...
最新文章
- python【蓝桥杯vip练习题库】ALGO-50 数组查找及替换
- 八、word-space与letter-space
- 展望企业级移动设备的操作系统
- 改变按钮在iPhone下的默认风格
- Qt QGraphics体系及刷新机制介绍
- MySQL和mq一致性,Mysql与Redis一致性问题
- linux启动mysql1820_linux 系统下MySQL5.7重置root密码(完整版,含ERROR 1820 (HY000)解决方案)...
- 作者:​徐优俊(1990-),男,北京大学前沿交叉学科研究院博士生。
- saveOrUpdate的使用
- JVM----类的加载机制
- 20181213-python1119作业郭恩赐
- Sublime text2空格替换tab键
- vue props 多类型_一个TypeScript简例,以及Vue支持TS的一些些事儿
- 第九次作业(杨辉三角)
- [luogu P4197] Peaks 解题报告(在线:kruskal重构树+主席树 离线:主席树+线段树合并)...
- 云服务器宽带怎么选择?3M够用吗?
- java学习笔记 - 集合类综合案例 斗地主
- 高质量程序设计指南C/C++阅读笔记
- AppUI常规设计颜色使用
- 分享一个properties转YAML小工具
热门文章
- android异步线程未执行,关于多线程:当服务在后台运行时,Android异步任务无法正常运行(doInBackground未执行)...
- 先进制造技术论文_干货分享:新能源汽车先进制造技术
- thinkphp项目mysql类关系_ThinkPHP数据库与模型
- 编写函数求字母出现次数c语言,c语言,程序设计题,输入一个字符串,统计该字符串中the出现次数。...
- java 基础数据类型面试_Java(数据类型)基础面试
- c 结构体 不允许使用不完整的类型_.NET Core 基础类型介绍
- mybatis传set参数
- (三) shiro通过jdbc连接数据库
- 一个农场有头母牛,现在母牛才一岁,要到四岁才能生小牛,四岁之后,每年生一头小牛,n年后有多少头小牛
- liferay jquery ajax跳转页面