javascript对下拉列表框(select)的操作实例讲解


Posted in Javascript onNovember 29, 2013

这篇文章,主要是关于javascript和select相关的最基本方法,以供不熟悉javascript的人参考。常见的情况是,提出表单结构的人, 不仅仅需要为程序设计逻辑,创建数据结构,还需要设计表单的样式,以及熟悉javascript;某些公司可能会要求您精通photoshop:最初的时候,我们都是全才。

下面是我们例子的基础;这不是一个标准的表单。

<form id="f">
<select size="1" name="s">
<option value="3water.com">三水点靠木</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; 
} 
} 

//反选列表中的项 by 3water.com asp学习网 
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--) 
{ 
//3water.com 
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); 
} 
} 
}

 

Javascript 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
JavaScript数组的5种迭代方法
Sep 29 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
JS数据类型分类及常用判断方法
Nov 19 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 #Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 #Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 #Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 #Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 #Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 #Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 #Javascript
You might like
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
按给定几率进行随机抽取的js代码
2010/12/28 Javascript
javascript闭包入门示例
2014/04/30 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
vue 页面跳转的实现方式
2021/01/12 Vue.js
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
pycharm安装图文教程
2017/05/02 Python
python3+PyQt5实现柱状图
2018/04/24 Python
python中的常量和变量代码详解
2018/07/25 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
《学会合作》教学反思
2014/04/12 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
交通工程专业推荐信
2014/09/06 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
个人优缺点总结
2015/02/28 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
vue+echarts实现多条折线图
2022/03/21 Vue.js