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 相关文章推荐
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
吐槽一下我所了解的Node.js
Oct 08 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
vue通过watch对input做字数限定的方法
Jul 13 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
js原生map实现的方法总结
Jan 19 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
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中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
Smarty变量用法详解
2016/05/11 PHP
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
Python中replace方法实例分析
2014/08/20 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
Python中join函数简单代码示例
2018/01/09 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
python查看模块安装位置的方法
2018/10/16 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
西雅图的买手店:Totokaelo
2019/10/19 全球购物
公司市场部岗位职责
2013/12/02 职场文书
给老婆的保证书范文
2014/04/28 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
Python列表的索引与切片
2022/04/07 Python
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS