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 相关文章推荐
location.href语句与火狐不兼容的问题
Jul 04 Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
jquery如何把数组变为字符串传到服务端并处理
Apr 30 Javascript
jquery自适应布局的简单实例
May 28 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
PHP 实现一种多文件上传的方法
Sep 20 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
Vue实现星级评价效果实例详解
Dec 30 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 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
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
java解析json方法总结
2019/05/16 PHP
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
Python使用Supervisor来管理进程的方法
2015/05/28 Python
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
Python时间获取及转换知识汇总
2017/01/11 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
python中re模块知识点总结
2021/01/17 Python
python 数据类型强制转换的总结
2021/01/25 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
粗加工管理制度
2014/02/04 职场文书
高中军训感言600字
2014/03/11 职场文书
环保建议书
2014/03/12 职场文书
美容院店长岗位职责
2014/04/08 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
初中信息技术教学反思
2016/02/16 职场文书
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL