用js转换文本成select-option元素...兼容浏览器问题

小弟正在做一个价格计算器...这是其中的一个模块..用来生成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="&#9;" title="Fix- Firefox&IE - textarea兼容 {tab} 识别">
<script type="text/javascript">
$('tabsrc').value='\u0009';
</script>
</body>
</html>

解决方案 »

  1.   

    目前在IE里点了"生成价格列表"按钮之后生成的htm会丢失"测试1"前边的<option value="cs">标签...我的代码到底哪有问题呢...希望修改后的代码能尽量简洁点...不要靠识别浏览器来分别对待...
      

  2.   

    $('search').select();$('search').focus();
    页面上好像就没有这个元素？
      

  3.   

    现在页面$('search').select();$('search').focus();这句话在报错
      

  4.   

    回MuBeiBei:
    $('search').select();$('search').focus();这两句可以去掉...
    问题是去掉之后: [生成的htm会丢失"测试1"前边的<option value="cs">标签]
      

  5.   

    var x=item[i].split($('tabsrc').value);
    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
      

  6.   

    再回MuBeiBei:
    请手工转换下面的分隔符为{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
      

  7.   

    我写的是 if (x.length==3)啊...不是4...
      

  8.   

    测试1{tab}0.4g/L{tab}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
    这样？
      

  9.   


    可x.length等于1啊在什么情况下能等于3？
      

  10.   

    我的意思是 [测试1    0.4g/L    9.10] 这中间的空格本来都是一个{tab}分隔符...唉...
    还是上穿个附件吧:
    http://bbs.operachina.com/download/file.php?id=63891
    下载后把扩展名改成htm就行了...
      

  11.   

    我说的{tab}的意思是一个制表符...而不是"{tab}"这个字符串...= =!!要不你把代码改成这样试试:
    <textarea id="data" style="width:70%; height:20%; display:block;" wrap="off" onDblClick="">测试1&#9;0.4g/L&#9;9.10
    测试2&#9;10L/Km&#9;0.75
    测试3&#9;0.3m/d&#9;45.1
    测试4&#9;0.4g/L&#9;9.10</textarea>
      

  12.   

    因为在excel里复制出来的数据粘贴到textarea里之后不同的列之间是用制表符分隔的...所以我要把每一行都用制表符分成三段...本来不分割分也是可以的...但是制表符显示到htm的option里的时候就像一个空格那么长了...品名\规格\单价之间空白太短看起来不美观...- -!!
      

  13.   

    不行打不开链接
    sorry...那个论坛被停了dns解析了...换个地方:
    http://u.115.com/file/dn9qxrh8啊啊啊....上穿个附件为何如此一波三折啊...==!
      

  14.   

    <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){
    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&#9;0.4g/L&#9;9.10
    测试2&#9;10L/Km&#9;0.75
    测试3&#9;0.3m/d&#9;45.1
    测试4&#9;0.4g/L&#9;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="&#9;" title="Fix- Firefox&IE - textarea兼容 {tab} 识别">
    <script type="text/javascript">
    $('tabsrc').value='\u0009';
    </script>
    </body>
    </html>
      

  15.   

    我就是不想用appendChild才写了innerHTML...莫非非得用dom么...T T||
    这下行了...谢谢啊...box里要完全重写...而不是追加...加了一条来清空...
    <input type="button" value="生成价格列表" onclick="$('box').innerHTML='';convData($('data').value);void(0);">
      

  16.   


    这个得用appendChild
    用innerHTML每个浏览器解释的不同，所以造成不兼容。
      

  17.   

    本来想用convData()直接返回一个值再一次性写入的...现在只能在convData()里直接完成dom的修改了...
      

  18.   


    嗯嗯 你这个想法挺好~·
    但是为了兼容~·呃``还是在convData函数里完成修改吧~·
    其实效果都一样，只是实现的方法不同而已~·
      

  19.   

    主要是怕data的数据太长的话不停的appendChild()的时候不知道是在什么时候把全部数据转换完毕...如果操作者太傻的话可能option还没全部生成就开始下一步操作了...这时候就不能得到完整的数据列表option...而且我觉得用字符串的累加可能比不停的createElement再appendChild效率高点...现在看来也没必要return z了....谢谢MuBeiBei...我去改代码去了...
      

  20.   

    嘿嘿...我成功了...不用appendChild了...我连着整个select一起写进去ie就可以正常生成数据了...ie真贱啊...= =!!给<SELECT id="box">外边加了个<div id="box-p">...
    然后用<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>';
    }
      

  21.   


    呵呵~·不错~·
    这样比createElement好多了~·
    外面套一个div 字符串生成select直接innerHTML里~·
      

  22.   

    我发现option元素太诡异了...不但不能直接在ie里用innerHTML生成还不能直接检测到onkeydown/up事件...
    前几天一直纠结在<option onkeydown="">事件,,直接写在option上的onkey事件竟然是返回给父select元素的...然后还要在select里循环所有option检测options[i].selected才能返回具体的被选中并按下键盘的option元素...
    这个东西差点没整死我啊...= =!
      

  23.   


    呵呵~·ie本来就有好多诡异的地方~·
    唉~·也不知道什么时候ie能好好出个都兼容的浏览器版本~·
      

  24.   

    option那个不能被检测键盘事件不只是在ie上...在opera和ff上也都是的...只能循环所有option检测selected...否则全直接把function返回给他所在的select...我还有个关于vbs的runat="server"和javascript混用时报错的问题...vbs和js本身都没问题...就是写在同一个页面里的时候ie会报不相干的错...不能正常执行页面脚本...如果过两天还是不能成功的话还得来发帖...木哥到时候可要来捧场啊...
    我吃饭去了先...
      

  25.   

    嘿嘿...我的vbs和js混写问题解决了...不用再发帖求助了...
    失败原因是:
    vbs加runat="server"来被js调用时需在每个htm标签的js代码中加 "javascript: " 来区分脚本类型, 否则 S13 的 IE 不能正常解析脚本. 比如<input onclick="void(0);">需要写成<input onclick="javascript:void(0);">这样...要不ie就会报错...
    ie自带的调试器太脑残了..报错位置差了十万八千里...还得靠我自己猜出来==!!
      

  26.   


    呵呵~·IE不认识void(0)
    这个得用javascript:伪协议~·