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 相关文章推荐
JavaScript使用prototype定义对象类型
Feb 07 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
vue实现搜索功能
May 28 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
javascript中可能用得到的全部的排序算法
Mar 05 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
React Fragment介绍与使用详解
Nov 11 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
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
vue多次循环操作示例
2019/02/08 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
python绘制多个子图的实例
2019/07/07 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
介绍一下内联、左联、右联
2013/12/31 面试题
十岁生日同学答谢词
2014/01/19 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
出纳员岗位职责
2014/03/13 职场文书
食品采购员岗位职责
2014/04/14 职场文书
优秀的个人求职信范文
2014/05/09 职场文书
热情服务标语
2014/10/07 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
队名及霸气口号大全
2015/12/25 职场文书
《月光曲》教学反思
2016/02/16 职场文书
合同补充协议书
2016/03/24 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android