<form id="f">
<select size="1" name="s">
<option value="lizi.name">梨子面馆</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);
}
}
}

  

javascript 和 下拉列表的更多相关文章

  1. 使用 JavaScript 在下拉列表中获取选定的值

    使用 JavaScript 在下拉列表中获取选定的值 演示Demo 使用 JavaScript 在下拉列表中获取选定的值? <!DOCTYPE html> <html> < ...

  2. JAVAscript——菜单下拉列表练习(阻止事件冒泡)

    下拉列表框,鼠标点击文本框,出现下拉,鼠标(离开的时候或者点击网页其他位置时)下拉列表消失.鼠标放到下拉列表的某一项上变背景色,点击下拉列表的某一项将该项的值显示在文本框内,然后下拉列表消失. < ...

  3. 原生Javascript 省市区下拉列表插件

    每个电商网站中,都会有收件地址管理模块,用户进行地址操作时,最好不要用户手工进行填写地址. 常见的地址管理界面: 实现插件:PCASClass.js 插件下载地址:http://pan.baidu.c ...

  4. JavaScript案例五:下拉列表左右选择

    用JavaScript实现下拉列表左右选择,很简单,不过要特别注意循环时要注意变量是否发生了变化(见代码) <!DOCTYPE html> <html> <head> ...

  5. JavaScript打开窗口与关闭页面操作大全

    JavaScript新开窗口 onClick="javascript:window.location='http://www.sowsoy.com'" JavaScript新开一个 ...

  6. Selenium2学习-014-WebUI自动化实战实例-012-Selenium 操作下拉列表实例-div+{js|jquery}

    之前已经讲过了 Selenium 操作 Select 实现的下拉列表:Selenium2学习-010-WebUI自动化实战实例-008-Selenium 操作下拉列表实例-Select,但是在实际的日 ...

  7. [插件]jQuery multiselect初始化及默认值修改

    下载地址:http://pan.baidu.com/s/1dE2daSD 1.Jquery多选下拉列表插件jquery multiselect功能介绍及使用 http://www.jb51.net/a ...

  8. html的下拉框的几个基本使用方法

    尽管使用EXT开发了一段时间,可是自己认为我对javascript还是不是非常熟,所以边看书边做小样例 给自己以后用到的时候查看下,都是非常主要的东西,对刚開始学习的人可能有点帮助 以下是代码 < ...

  9. javabean+servlet+jsp实现分页

    前端实现用ligerUI实现分页,感觉用框架确实简单,闲着无聊,模拟着liger的分页界面实现了一遍(只要是功能,样式什么无视) 这里用基础的三层架构+servlet+jsp实现,思路很简单,把所有分 ...

随机推荐

  1. HDU 5377 (Exgcd + 原根)

    转载自:大牛 知道一个定理了 a ^ x = y (mod p) ===>>   logd(a) * x = logd(y) (mod O(p) )      d 为 p 的 原根,  O ...

  2. 远程连接阿里云的mysql数据库

    第一步 由于mysql版本问题 先尝试打开 sudo vim /etc/mysql/my.cnf 如空,再尝试打开 sudo vim /etc/mysql/mysql.conf.d/mysqld.cn ...

  3. adb ( Android Debug Bridge)

    adb ( Android Debug Bridge) 是一个通用命令行工具,其允许您与模拟器实例或连接的 Android 设备进行通信.它可为各种设备操作提供便利,如安装和调试应用. adb工具的工 ...

  4. Confluence 6 home 目录

    Confluence Home 目录是存储 Confluence 信息,查找索引,页面附件的地方.其实 Home 目录也可以定义为数据目录. 找到 Home 目录 Confluence 的 home ...

  5. Confluence 6 附件存储提取文本文件

    当基于文本的文件上传到 Confluence(例如,Word,PowerPoint 等),这些文件中的文本是可以提取并且添加到索引中的,用户可以通过索引来搜索这些文件中的文本内容,不仅仅是搜索文件名. ...

  6. pod 使用详解

    cd 进去到 项目目录 包含 xcodeproj 结尾的目录下 1 pod init 创建一个pod 文件 2 打开生产的pod 文件 然后 配置pod 文件 并保存  3 pod install 安 ...

  7. sench touch 时间插件 扩展

    因项目 需要  老项目需要用到  时分  的插件  而本身sencha  touch  自己木有这个功能,因此在网上找到了 一个可以扩展的插件. 相关目录复制如下代码: /** * The picke ...

  8. 第十七单元 Samba服务

    Samba的功能 Samba的安装 Samba服务的启动.停止.重启 Samba服务的配置 Samba服务的主配置文件 samba服务器配置实例 Samba客户端设置 windows客户端 Linux ...

  9. vue-cli脚手架(框架)

    一.创建vue项目 npm install vue-cli -g #-g全局 (sudo)npm install vue-cli -g #mac笔记本 vue-init webpack myvue # ...

  10. LeetCode(80):删除排序数组中的重复项 II

    Medium! 题目描述: 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素最多出现两次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额 ...