Js获取下拉框选定项的值和文本的实现代码


Posted in Javascript onFebruary 26, 2014

Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误!

下面我总结下Firefox和IE下获取下拉框选定项的值和文本:

1. IE和Firefox都支持的方法:
获取文本

var obj=document.getElementById('select_template'); 
var text=obj.options[obj.selectedIndex].text;//获取文本
 
var obj=document.getElementById("select_template");
        for(i=0;i<obj.length;i++) {//下拉框的长度就是他的选项数
           if(obj[i].selected==true) {
            var text=obj[i].text;//获取文本
        }
}

二者相比上一个方法比较简洁

2. IE支持Firefox不支持:

var obj=document.getElementById(name);
for(i=0;i<obj.length;i++)  {
        if(obj[i].selected==true) {
           var text= obj[i].innerText;     
        }
    }

获取值方法IE和Firefox通用:
var value=document.getElementById("select_template").value;//获取值

总结:其实主要就是IE和Firefox都支持value和text属性,Firefox不支持innerText属性。

Js实现当前页打开一个新链接:
window.location.href=url;

Javascript 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
基于vue实现多引擎搜索及关键字提示
Mar 16 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 Javascript
js自动查找select下拉的菜单并选择(示例代码)
Feb 26 #Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 #Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 #Javascript
Javascript高级技巧分享
Feb 25 #Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 #Javascript
js判断为空Null与字符串为空简写方法
Feb 24 #Javascript
JS清空多文本框、文本域示例代码
Feb 24 #Javascript
You might like
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
Python中常用的内置方法
2019/01/28 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
淘宝活动策划方案
2014/02/06 职场文书
机修工工作职责
2014/02/21 职场文书
节能宣传周活动总结
2014/05/08 职场文书
英文道歉信
2015/01/20 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书