大城小胖的大城

<button>标签的一些细节 (兼冷知识开篇) | firefox 2 的一个bug (更新) :关于页面元 ...

2008-03-05

safari 3 的一个bug : 关于select的 (我怀疑这个bug我是全球首发)

在给gt grid编写editor时发现的 safari 版本 3.0.4

这个bug 简单点说就是,
当select下的所有option的 selected属性都是 false时,
大多数浏览器都会将选项指向上次选择的项,而safari会生造出一个空的option来,
而且这种情况不是总发生, 什么时候发生什么时候不发生不好说看后面的代码注释吧

演示文件见附件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript">
	function init(selectObj) {
		
		// 对于s1 safari的做法和其他浏览器一致, 都是默认选中第一个
		selectObj=document.getElementById('s1');
		for (var i=0; i<selectObj.options.length; i++) {
			selectObj.options[i].selected=false;
		}


// 对于s2 safari的做法就出现问题了, 会生造出一个
		selectObj=document.getElementById('s2');
		for (var i=0; i<selectObj.options.length; i++) {
			selectObj.options[i].selected=false;
		}

alert(selectObj.value)  // 注意这个alert.


// 对于s3 safari的做法本来应该和 s2 一样 但是由于多了一个上面的alert, 一切又不同额 FT!!!!
// 如果你把上面的 alert 注释了 那么 s3 和 s2 完全一样 

		selectObj=document.getElementById('s3');
		for (var i=0; i<selectObj.options.length; i++) {
			selectObj.options[i].selected=false;
		}
	}
</script>

 </head>

 <body onload="init();">
	<select id="s1">
		<option value="1" selected="selected" >aaaa</option>
		<option value="2">bbb</option>
		<option value="3">ccc</option>
    </select>

<br/><br/>

	<select id="s2">
		<option value="11" >zzz</option>
		<option value="22">xxxx</option>
		<option value="33">ccc</option>
    </select>


<br/><br/>

	<select id="s3">
		<option value="111" >bbb</option>
		<option value="222">nnn</option>
		<option value="333">mmm</option>
    </select>

 </body>
</html>

safari_bug.zip (850 Bytes)
描述:
下载次数: 3

00:16
浏览 (941)
评论 (5)
分类: js & ajax
进入论坛
发布在 GT-Grid 圈子
相关推荐

<!DOCTYPE html>
<html>
<head>
<title>Test SELECT of Safari
<script>
	
	function info(o) {
		if (o === undefined) return 'UNDEFINED';
		if (o === null) return 'NULL';
		if (o === '') return  'EMPTY';
		return o;
	}
	
	function out(msg) {
		out.buffer.push(msg);
	}
	out.buffer = [];
	out.show = function () {
		document.getElementById('stdout').innerHTML = out.buffer.join('');
	}
	
	function testSelect(id) {
		var s = document.getElementById(id);
		
		out('test ' + id);
		out('<br/>');
		out('options[0].selected = ');
		out(s.options[0].selected);
		out('<br/>');
		out('options[0].selected = ');
		out(s.options[0].selected);
		out('<br/>');
		out('value = ');
		out(s.value);
		out('<br/>');
		out('options[0].selected = ');
		out(s.options[0].selected);
		out('<br/>');
		out('selectedIndex = ');
		out(s.selectedIndex);
		out('<br/>');
		out('<br/>');
		
		/*
		s.options[s.selectedIndex].selected = false;
		out(s.selectedIndex);
		*/
	}
	
	
	window.addEventListener('load', function() {
		//testSelect('s4');
	}, false);
	
	window.addEventListener('load', function() {
		testSelect('s5');
	}, false);
	
</script>

 </head>

<body>

<div id="stdout"></div>

<form>
	<select id="s1">
		<option value="1" selected="selected">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
	<script>testSelect('s1');</script>
	<br/>
	<select id="s2">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
	<script>testSelect('s2');</script>
	<br/>
	<select id="s3">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
	<script>setTimeout(function(){testSelect('s3');}, 1);</script>
	<br/>
	<select id="s4">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
	<br/>
	<select id="s5">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
	<br/>
</form>

<p><input type="button" onclick="out.show()" value="show log"/></p>

</body>
</html>

fins 2008-03-05

恩我现在就是这么做的唉郁闷啊凭空又多了好多行代码

以精简代码为目的的重构但是随着测试的深入不停的添加代码
现在已经比"精简"前多了上百行的代码了 :'(

hax 2008-03-05

那你就手动判断一下呀，如果值不符合任何一个option就设成默认的那个（比如第一个）。

fins 2008-03-05

我是在 load之后的一个复杂的例子发现的这个bug
不在load里的话添加空option的问题还是存在的

我是在做可编辑列表的时候发现的

点击一个单元格如果这个单元格对应的编辑器是 select 那么就吧单元格的值 set给select
这时候如果单元格的值不是select的选项中的任何一个会加入空option
这个比较郁闷啊

hax 2008-03-05

你不要在load事件中测，如果在load之后测试，会看到不同的结果。
Safari的行为和FF不一样，它允许selectedIndex=-1，即一个都不选。

但是如果初始标签上没有selected，Safari会执行一个初始化过程，将第一个select起来。

你描述的行为貌似是因为这个初始化工作在load的时候还没有完成。
alert会延时，所以第一次alert之后，初始化工作就完成了。这是为什么alert会影响你的测试结果。

不过，任何时候只要你访问select上的selectedIndex，就都会进行初始化过程。

我个人认为这可以算一个bug，但是只在极端情况下出现。