IE6/7/8中Option元素未设value时Select将获取空字符串

如下


代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>IE6/7/8中Option元素未设value时Select将获取空字符串</title>
</head>
<body>
<select onchange="alert(this.value)">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</body>
</html>

当触发change事件时，各浏览器中测试结果如下：
IE6/7/8 : 弹出空字符串
IE9/Firefox/Safari/Chrome/Opera : 弹出对应的option元素的innerText值。

很明显，IE9/Firefox/Safari/Chrome/Opera 的实现有一定道理。即当option的value和option的innerText相同时可以省略掉其value不写。这样更简洁。可惜 IE6/7/8 不支持这么写。为保证兼容所有浏览器，书写option时务必别少了value属性。

把上面的html代码稍作修改


代码如下:

<select onchange="alert(this.value)">
<option value="1">one</option>
<option>two</option>
<option>three</option>
</select>

给第一个option添加了value属性。这时测试步骤如下
1，选择two
2，选择one

两次弹出的结果如下：
IE6/7/8 : [空字符串，1]
IE9/Firefox/Safari/Chrome/Opera : [two,1]

从结果上可以看出各浏览器的实现大概如下：

IE6/7/8中，如果option没有value值，那么将返回空字符串。
IE9/Firefox/Safari/Chrome/Opera 中先取option的value值，如果没有value属性，则取option的innerText值。

再修改下代码


代码如下:

<select onchange="alert(this.value.length)">
<option value="1">one</option>
<option> two </option>
<option>three</option>
</select>

与上一步相比，第二个option的two两边加了空格。这次我们alert出value的长度。选择two。这时各浏览器中弹出结果如下
IE6/7/8 : 0
IE9/Firefox/Safari/Chrome/Opera : 3

IE6/7/8 中对于没有value属性的option返回空字符串，其length自然是0。这次测试关注的主要是IE9/Firefox/Safari/Chrome/Opera 这些现代浏览器。它们中返回的都是3却不是5。可以看到这些浏览器内部将two两边的空白符去掉了（trim）。

上一个测试已经提到了IE9/Firefox/Safari/Chrome/Opera中先取option的value，value属性没有再取option的innerText值。对于没有设置value属性的option，它们努力将其innerText作为value返回，甚至会自动去掉两边的空白符。

以上一直提到返回option的innerText，却不是innerHTML。再修改下代码


代码如下:

<select onchange="alert(this.value)">
<option value="1">one</option>
<option><span>two</span></option>
<option>three</option>
</select>

第二个option没有value属性，其内是个span元素。这时选择two。在IE9/Firefox/Safari/Chrome/Opera中弹出的仍然是“two”，而不是“<span>two</span>”。如果alert出其length会发现仍然是3，而不是“<span>two</span>”的长度16。

可以看到当忘记写option的value时这些现代浏览器都会尽量返回正确的（客户端程序员想要的）结果value，其容错性比IE6/7/8做的更好。

相关：
各浏览器中option元素的表现差异

赞 (0)

相关推荐

  • 总结C#删除字符串数组中空字符串的几种方法

    总结C#删除字符串数组中空字符串的几种方法

    前言 随着微软对C#不断发展和更新,C#中对于数组操作的方式也变得越来越多样化.以往要实现过滤数组中的空字符串,都是需要实行循环的方式来排除和过滤.但C#3.0新增的lambda表达式就可以很方便实现这个功能,下面一起看看为大家整理的几种清除数组中的空字符串的方法,有需要的可以参考学习. 方式一:使用lambda表达式筛选过滤掉数组中空字符串 /// <summary> /// 使用lambda表达式排除/过滤/清空/删除掉字符串数组中的空字符串 /// </summary> //

  • Objective-C处理空字符串和页面传值及自定义拷贝

    空字符串 在ios应用中,如果从网络请求数据,返回json或者是xml格式的数据时,经常会遇到空串,一般接口是用java等语言写的,如果是安卓,因为源语言都是java,只需判断是否等于null即可,但是在ios中会出现各种各项的形式,比如null,(null),<null>. 如果单纯用 复制代码 代码如下: string!=nil; 无法判断出尖括号的空串 完整判断方法 复制代码 代码如下: -(BOOL)isNull:(id)object {     // 判断是否为空串     if (

  • Linux fgetcsv取得的数组元素为空字符串的解决方法

    但服务器上,很多使用Linux服务器,源程序使用UTF-8,这样很容易产生字符编码的问题. 如果仅仅将CSV文件转码为UTF-8,这样在Windows服务器上没有问题, 而在RedHat5.5上,用fgetcsv取得的数组中,如果某列的内容是中文,则该列对应的数组元素为空字符串,而英文则正常. 这时,需要设置区域: setlocale(LC_ALL, 'zh_CN.UTF-8'); 代码如下 复制代码 代码如下: // 上传的CSV文件,通常是用Excel编辑的GBK编码, // 而源代码是UT

  • C 字符串数组排序的小例子

    复制代码 代码如下: #include<stdio.h>#include<string.h>#include <malloc.h>void q_sortB(char str[20][20], int n);void qs(char str[20][20],int n); void main() {    int i, n;    char str[20][20] = { { "Adam" }, { "Bob" }, { "

  • C# Stream 和 byte[] 之间的转换

    /* - - - - - - - - - - - - - - - - - - - - - - - -   * Stream 和 byte[] 之间的转换  * - - - - - - - - - - - - - - - - - - - - - - - */ /// <summary> /// 将 Stream 转成 byte[] /// </summary> public byte[] StreamToBytes(Stream stream) {     byte[] bytes 

  • Oracle数据库中对null值的排序及mull与空字符串的区别

    order by排序之null值处理方法 在对业务数据排序时候,发现有些字段的记录是null值,这时排序便出现了有违我们使用习惯的数据大小顺序问题.在Oracle中规定,在Order by排序时缺省认为null是最大值,所以如果是ASC升序则被排在最后,而DESC降序则排在最前.所以,为何分析数据的直观性方便性,我们需要对null的记录值进行相应处理. 这是四种oracle排序中NULL值处理的方法: 1.使用nvl函数 语法:Nvl(expr1, expr2)     若EXPR1是NULL,

  • c语言中用字符串数组显示菜单的解决方法

    以前写菜单方面东西时往往重复, 发现这个方法还可以, 用一个指针的指针解决遍历问题.代码如下所示: 复制代码 代码如下: #include <stdio.h>static char *menu[] = {  "1 --- push one item./n",  "2 --- pop one item./n",  "3 --- quit./n",  NULL};void Show_menu();int main(){ Show_menu

  • C#几种截取字符串的方法小结

    1.根据单个分隔字符用split截取 例如 复制代码 代码如下: string st="GT123_1"; string[] sArray=st.split("_"); 即可得到sArray[0]="GT123",sArray[1]="1"; 2.利用多个字符来分隔字符串 例如 复制代码 代码如下: string str = "GTAZB_JiangjBen_123";string[] sArray = s

  • IE6/7/8中Option元素未设value时Select将获取空字符串

    如下 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <title>IE6/7/8中Option元素未设value时Select将获取空字符串</title> </head> <body> <select onchange="alert(this.value)"> <option>one</option> <option>

  • javascript各浏览器中option元素的表现差异

    1,IE6/7/8/9中无事件(如click,mouseover),Firefox/Safari/Chrome/Opera则有. 复制代码 代码如下: <select id="s1" multiple="multiple"> <option value="1" onclick="alert(1);">1</option> <option value="2" oncl

  • 从零开始学习jQuery (四) jQuery中操作元素的属性与样式

    从零开始学习jQuery (四) jQuery中操作元素的属性与样式

    一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将讲解如何使用jQuery获取和修改元素属性和样式. 三. 区分DOM属性和元素属性 一个img标签: <img src="images/image.1.jpg" id="hibiscus" alt="

  • 利用js查找数组中指定元素并返回该元素的所有索引示例

    前言 这篇文章主要给大家介绍的是利用js查找数组中指定元素并返回该元素的所有索引的相关资料,文中给出了详细的示例代码,下面话不多说,来看看详细的代码示例吧. 示例代码 //在数组中查找所有出现的x,并返回一个包含匹配索引的数组 function findall(a,x){ var results=[], len=a.length, pos=0; while(pos<len){ pos=a.indexOf(x,pos); if(pos===-1){//未找到就退出循环完成搜索 break; } r

  • php删除数组中重复元素的方法

    几种php删除数组元素方法在很多情况下我们的数组会出现重复情况,那我们删除数组中一些重复的内容怎么办,这些元素必须保持他唯一,所以就想办法来删除它们,下面利用了遍历查询来删除重复数组元素的几种方法. 方法一.完整删除重复数组实例-----删除数组中的一个元素 function array_remove_value(&$arr, $var){ foreach ($arr as $key => $value) { if (is_array($value)) { array_remove_valu

  • ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法

    本文实例讲述了ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法.分享给大家供大家参考,具体如下: 在作业管理系统中,学生登陆到个人中心后可以通过左侧的菜单查看自己已经提交的作业和未提交作业.那么在系统中如何实现这些数据的查询的呢?首先我们需要弄清楚学生(Student).班级(class).作业提交表(Submit)这三个表之间的关系. 1. 每个学生都属于一个班级 2. 班级里的每个学生都会被布置同样的作业 3. 学生提交作业后会在作业提交表中添加响应的记录,如学生的I

  • python获取array中指定元素的示例

    对于array,如2-D的array,如何取指定元素 设array为3*10的shape s = array([[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9], [10, 11, 12, 13, 14, 15, 16, 17, 18, 19], [20, 21, 22, 23, 24, 25, 26, 27, 28, 29]]) 想取指定元素,下标索引即可如: >>> s[1][4] 扩展一下,若想同时取多个元素,则把行号,列号对应的元素封装成list,或者range &

  • python/golang 删除链表中的元素

    先用使用常规方法,两个指针: golang实现: type Node struct { value int next *Node } type Link struct { head *Node tail *Node lenth int } // 向链表中添加元素 func (link *Link) add(v int) { if link.lenth == 0 { // 当前链表是空链表 link.head = &Node{v, nil} link.tail = link.head link.l

  • JS中彻底删除JSON对象组成的数组中的元素

    在 JS 中,对于某个由 JSON 对象组成的数组,例如: var test = [{ "a": "1", "b": "2" }, { "a": "3", "b": "4" }, { "a": "5", "b": "6" }]; 如果我们想要删除其中的第二个json对象

  • 详解jQuery中的元素的属性和相关操作

    元素属性 元素的属性中可以包含很多有用的信息,所以如何设置或得到属性中的值,就显得非常重要. jQuery 的 $.fn.attr 方法可以作为 setter 和 getter 使用,用来设置或获取属性的值.和 $.fn.css 用法类似,$.fn.attr 既可一次性接受单个属性,也可以接受多个属性(对象) : $('a').attr('href', 'allMyHrefsAreTheSameNow.html'); $('a').attr({ 'title' : 'all titles are

随机推荐