javascript获取下拉列表框当中的文本值示例代码


Posted in Javascript onJuly 31, 2013

近日碰到一个问题,就是需要将用户点击下拉列表当中某个选项后,将其所选的内容保存起来,例如下面的HTML代码:

<select onchange="isSelected(this.value);" id="city"> 
<option value="1">北京</option> 
<option value="2" >上海</option> 
<option value="2" >广州</option> 
</select>

也就是说当用户选择“上海”这一列时,需要将“上海”这个名称保存起来。其实方法很简单。看下面javascript代码:
function isSelected(value) { 
var cityName; 
var city = document.getElementById("city"); 
//获取选中的城市名称 
for(i=0;i<city.length;i++){ 
if(city[i].selected==true){ 
cityName = city[i].innerText; //关键点 
alert("cityName:" + cityName); 
} 
}

也可以这么做:
function isSelected(value) { 
var city = document.getElementById("city"); 
alert(city.options[city.selectedIndex].innerText); 
}

大致解释一下,首先在HTML页面上有一个下拉框,并为此下拉框定了一个“city”的id,并为其绑定了一个onchange事件,通过此事件调用javascript函数。

在javascript函数当中,通过domcument对象获取当前下拉框的节点元素,由于节点的值并非只有一个,所以我们可以通过循环节点来得到每个选项的值。在循环的时候通过判断当前选项是否选中,如果选中则使用city[i].innerText 方式获取当前所选中的文本值。当然如果需要获取选项值,只需如此即可:city[i].value.

至此,通过以上方法在IE下已能达到所要的结果。但是,在FIREFOX下测试时,发现此法不起作用,最后通过查阅资料发现另外一个方法。将city[i].innerText 改为 city[i].text即可。这种方法对IE及FIXEFOX都适用!

Javascript 相关文章推荐
javascript 词法作用域和闭包分析说明
Aug 12 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 #Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 #Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 #Javascript
在表单提交前进行验证的几种方式整理
Jul 31 #Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 #Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 #Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 #Javascript
You might like
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
php中socket通信机制实例详解
2015/01/03 PHP
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
微信小程序实现多图上传
2020/06/19 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
Python字符串处理函数简明总结
2015/04/13 Python
Python中整数的缓存机制讲解
2019/02/16 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
python文件和文件夹复制函数
2020/02/07 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
勤俭节约演讲稿
2014/05/08 职场文书
平安工地汇报材料
2014/08/19 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
世界文化遗产导游词
2015/02/13 职场文书
Java内存模型之happens-before概念详解
2021/06/13 Java/Android
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL