浏览 2890 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-03-05
在给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>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-03-05
你不要在load事件中测，如果在load之后测试，会看到不同的结果。
Safari的行为和FF不一样，它允许selectedIndex=-1，即一个都不选。 但是如果初始标签上没有selected，Safari会执行一个初始化过程，将第一个select起来。 你描述的行为貌似是因为这个初始化工作在load的时候还没有完成。 alert会延时，所以第一次alert之后，初始化工作就完成了。这是为什么alert会影响你的测试结果。 不过，任何时候只要你访问select上的selectedIndex，就都会进行初始化过程。 我个人认为这可以算一个bug，但是只在极端情况下出现。 |
| 返回顶楼 | |
|
发表时间：2008-03-05
我是在 load之后的一个复杂的例子发现的这个bug
不在load里的话 添加 空option的问题还是存在的 我是在做可编辑列表的时候发现的 点击一个单元格 如果这个单元格对应的编辑器是 select 那么就吧单元格的值 set给select 这时候如果 单元格的值 不是select的选项中的任何一个 会加入 空option 这个比较郁闷啊 |
| 返回顶楼 | |
|
发表时间：2008-03-05
那你就手动判断一下呀，如果值不符合任何一个option就设成默认的那个（比如第一个）。
|
| 返回顶楼 | |
|
发表时间：2008-03-05
恩 我现在就是这么做的 唉 郁闷啊 凭空又多了好多行代码
以精简代码为目的的重构 但是随着测试的深入 不停的添加代码 现在已经比"精简"前 多了上百行的代码了 :'( |
| 返回顶楼 | |
|
发表时间：2008-03-05
测试代码：
<!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>
|
| 返回顶楼 | |
