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 相关文章推荐
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
解析javascript 浏览器关闭事件
Jul 08 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
jQuery中:checkbox选择器用法实例
Jan 03 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 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中echo和print的区别
2014/08/28 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
python实现邮件循环自动发件功能
2020/09/11 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
健康家庭事迹材料
2014/05/02 职场文书
2015年入党决心书
2015/02/05 职场文书
综合测评个人总结
2015/03/03 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android