小弟正在做一个价格计算器...这是其中的一个模块..用来生成select选单...
因为面向人群比较傻..只会从xls文件里直接复制..所以原始数据必须是用{tab}分割的...
又因为运行环境比较古老,,win2000,,所以代码要求兼容IE5(其实现在连IE8也不兼容)和opera9.x(个人需要)...
现在的问题是: 点了我的生成数据按钮之后,,在opera和ff都能正常在select里生成option列表,,但是在IE(5-8)上会丢失第一个<option>造成不能正常显示选项...请知情人士帮我看看如何让我的代码能兼容ie...谢谢啊...
代码:
<html>
<HEAD>
<TITLE>C-BaseHtml-v2</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function $(id){return window.document.getElementById(id);}
function convData(w){
var item=w.split(/[\n\r]+/); var z='';
for (var i=0;i<item.length;i++){
var x=item[i].split($('tabsrc').value);
if (x.length==3){
z+='<OPTION value=\"cs\">'+x[0]+'\u3000-\u3000'+x[1]+'\u3000-\u3000'+x[2]+'<\/OPTION>\n';
} else {alert('"'+item[i]+'" - 格式错误, 请严格按照 "品名{tab}规格{tab}单价" 格式排版, 不要缺少或有多余的{tab} .'); $('search').select();$('search').focus();}
}
return z;
}
</script>
</HEAD>
<body>
<input type="button" value="生成价格列表" onclick="$('box').innerHTML=convData($('data').value);void(0);">原始数据粘贴区:
<textarea id="data" style="width:70%; height:20%; display:block;" wrap="off" onDblClick="">测试1 0.4g/L 9.10
测试2 10L/Km 0.75
测试3 0.3m/d 45.1
测试4 0.4g/L 9.10</textarea>
<br>
价格列表预览区(只读):
<SELECT id="box" size="7" style="width:70%; display:block; background: #ccc;">
<OPTION value="qqq">qqq - 0.3m/d - 45.1</OPTION>
<OPTION value="qqq">qqq1 0.3m/d - 45.1</OPTION>
<OPTION value="aaa">aaa1 - 0.4g/L - 9.10</OPTION>
</SELECT>.<input id="tabsrc" type="hidden" value="	" title="Fix- Firefox&IE - textarea兼容 {tab} 识别">
<script type="text/javascript">
$('tabsrc').value='\u0009';
</script>
</body>
</html>
因为面向人群比较傻..只会从xls文件里直接复制..所以原始数据必须是用{tab}分割的...
又因为运行环境比较古老,,win2000,,所以代码要求兼容IE5(其实现在连IE8也不兼容)和opera9.x(个人需要)...
现在的问题是: 点了我的生成数据按钮之后,,在opera和ff都能正常在select里生成option列表,,但是在IE(5-8)上会丢失第一个<option>造成不能正常显示选项...请知情人士帮我看看如何让我的代码能兼容ie...谢谢啊...
代码:
<html>
<HEAD>
<TITLE>C-BaseHtml-v2</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function $(id){return window.document.getElementById(id);}
function convData(w){
var item=w.split(/[\n\r]+/); var z='';
for (var i=0;i<item.length;i++){
var x=item[i].split($('tabsrc').value);
if (x.length==3){
z+='<OPTION value=\"cs\">'+x[0]+'\u3000-\u3000'+x[1]+'\u3000-\u3000'+x[2]+'<\/OPTION>\n';
} else {alert('"'+item[i]+'" - 格式错误, 请严格按照 "品名{tab}规格{tab}单价" 格式排版, 不要缺少或有多余的{tab} .'); $('search').select();$('search').focus();}
}
return z;
}
</script>
</HEAD>
<body>
<input type="button" value="生成价格列表" onclick="$('box').innerHTML=convData($('data').value);void(0);">原始数据粘贴区:
<textarea id="data" style="width:70%; height:20%; display:block;" wrap="off" onDblClick="">测试1 0.4g/L 9.10
测试2 10L/Km 0.75
测试3 0.3m/d 45.1
测试4 0.4g/L 9.10</textarea>
<br>
价格列表预览区(只读):
<SELECT id="box" size="7" style="width:70%; display:block; background: #ccc;">
<OPTION value="qqq">qqq - 0.3m/d - 45.1</OPTION>
<OPTION value="qqq">qqq1 0.3m/d - 45.1</OPTION>
<OPTION value="aaa">aaa1 - 0.4g/L - 9.10</OPTION>
</SELECT>.<input id="tabsrc" type="hidden" value="	" title="Fix- Firefox&IE - textarea兼容 {tab} 识别">
<script type="text/javascript">
$('tabsrc').value='\u0009';
</script>
</body>
</html>
页面上好像就没有这个元素?
$('search').select();$('search').focus();这两句可以去掉...
问题是去掉之后: [生成的htm会丢失"测试1"前边的<option value="cs">标签]
alert(x.length)
if (x.length==4){
z+='<OPTION value="cs">'+x[0]+'\u3000-\u3000'+x[1]+'\u3000-\u3000'+x[2]+'<\/OPTION>\n';
}
你看看alert(x.length)永远是1,而你if写的是等于4
请手工转换下面的分隔符为{tab}分割...源码在论坛上发出来之后自动把我的{tab}转换成空格了...所以把你转到了原始数据格式错误的提示上...= =!!
测试1 0.4g/L 9.10
测试2 10L/Km 0.75
测试3 0.3m/d 45.1
测试4 0.4g/L 9.10
测试2{tab}10L/Km{tab}0.75
测试3{tab}0.3m/d{tab}45.1
测试4{tab}0.4g/L{tab}9.10
这样?
可x.length等于1啊在什么情况下能等于3?
还是上穿个附件吧:
http://bbs.operachina.com/download/file.php?id=63891
下载后把扩展名改成htm就行了...
<textarea id="data" style="width:70%; height:20%; display:block;" wrap="off" onDblClick="">测试1	0.4g/L	9.10
测试2	10L/Km	0.75
测试3	0.3m/d	45.1
测试4	0.4g/L	9.10</textarea>
sorry...那个论坛被停了dns解析了...换个地方:
http://u.115.com/file/dn9qxrh8啊啊啊....上穿个附件为何如此一波三折啊...==!
<HEAD>
<TITLE>C-BaseHtml-v2</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function $(id){return window.document.getElementById(id);}
function convData(w){
var item=w.split(/[\n\r]+/); var z='';
for (var i=0;i<item.length;i++){
var x=item[i].split($('tabsrc').value);
if (x.length==3){
var option = document.createElement('option');
option.value = 'cs';
option.innerHTML = x[0]+'\u3000-\u3000'+x[1]+'\u3000-\u3000'+x[2];
//z+='<OPTION value=\"cs\">'+x[0]+'\u3000-\u3000'+x[1]+'\u3000-\u3000'+x[2]+'<\/OPTION>\n';
//alert(z)
document.getElementById('box').appendChild(option);
} else {alert('"'+item[i]+'" - 格式错误, 请严格按照 "品名{tab}规格{tab}单价" 格式排版, 不要缺少或有多余的{tab} .'); $('search').select();$('search').focus();}
}
return z;
}
</script>
</HEAD>
<body>
<input type="button" value="生成价格列表" onclick="convData($('data').value);void(0);">原始数据粘贴区:
<textarea id="data" style="width:70%; height:20%; display:block;" wrap="off" onDblClick="">测试1	0.4g/L	9.10
测试2	10L/Km	0.75
测试3	0.3m/d	45.1
测试4	0.4g/L	9.10</textarea>
<br>
价格列表预览区(只读):
<SELECT id="box" size="7" style="width:70%; display:block; background: #ccc;">
<OPTION value="qqq">qqq - 0.3m/d - 45.1</OPTION>
<OPTION value="qqq">qqq1 0.3m/d - 45.1</OPTION>
<OPTION value="aaa">aaa1 - 0.4g/L - 9.10</OPTION>
</SELECT>.<input id="tabsrc" type="hidden" value="	" title="Fix- Firefox&IE - textarea兼容 {tab} 识别">
<script type="text/javascript">
$('tabsrc').value='\u0009';
</script>
</body>
</html>
这下行了...谢谢啊...box里要完全重写...而不是追加...加了一条来清空...
<input type="button" value="生成价格列表" onclick="$('box').innerHTML='';convData($('data').value);void(0);">
这个得用appendChild
用innerHTML每个浏览器解释的不同,所以造成不兼容。
嗯嗯 你这个想法挺好~·
但是为了兼容~·呃``还是在convData函数里完成修改吧~·
其实效果都一样,只是实现的方法不同而已~·
然后用<input type="button" value="生成价格列表" onclick="$('box-p').innerHTML=convData($('data').value);void(0);">convData改成了:
function convData(w){
var item=w.split(/[\n\r]+/); var z='<SELECT id=\"box\" size=\"7\" style=\"width:70%\; background: #ccc\;\">\n';
for (var i=0;i<item.length;i++){
var x=item[i].split($('tabsrc').value);
if (x.length==3){
z+='<OPTION value="'+hz2py(x[0])+'">'+x[0]+'\u3000-\u3000'+x[1]+'\u3000-\u3000'+x[2]+'<\/OPTION>\n';
} else {
alert('"'+item[i]+'" - 格式错误, 请严格按照 "品名{tab}规格{tab}单价" 格式排版, 不要缺少或有多余的{tab} .'); $('search').select();$('search').focus();
}
}
return z+'<\/SELECT>';
}
呵呵~·不错~·
这样比createElement好多了~·
外面套一个div 字符串生成select直接innerHTML里~·
前几天一直纠结在<option onkeydown="">事件,,直接写在option上的onkey事件竟然是返回给父select元素的...然后还要在select里循环所有option检测options[i].selected才能返回具体的被选中并按下键盘的option元素...
这个东西差点没整死我啊...= =!
呵呵~·ie本来就有好多诡异的地方~·
唉~·也不知道什么时候ie能好好出个都兼容的浏览器版本~·
我吃饭去了先...
失败原因是:
vbs加runat="server"来被js调用时需在每个htm标签的js代码中加 "javascript: " 来区分脚本类型, 否则 S13 的 IE 不能正常解析脚本. 比如<input onclick="void(0);">需要写成<input onclick="javascript:void(0);">这样...要不ie就会报错...
ie自带的调试器太脑残了..报错位置差了十万八千里...还得靠我自己猜出来==!!
呵呵~·IE不认识void(0)
这个得用javascript:伪协议~·