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 textContent与innerText的异同分析
Oct 22 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
javascript随机抽取0-100之间不重复的10个数
Feb 25 Javascript
angular中的cookie读写方法
Aug 02 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 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后退一页表单内容保存实现方法
2012/06/17 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
Safari5中alert的无限循环BUG
2011/04/07 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
js实现密码强度检验
2017/01/15 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
python将人民币转换大写的脚本代码
2013/02/10 Python
Python遍历目录的4种方法实例介绍
2015/04/13 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
2014年五一促销活动方案
2014/03/09 职场文书
股权收购意向书
2014/04/01 职场文书
作风建设演讲稿
2014/05/23 职场文书
2014年话务员工作总结
2014/11/19 职场文书
酒店宣传语大全
2015/07/13 职场文书
Nginx报404错误的详细解决方法
2022/07/23 Servers