javascript小问题-改变字母显示方式

部分代码如下：function change(){
var selNode=document.getElementById("seId");
var value=selNode.options[selNode.selectedIndex].value;
//alert(value);
var cssNode=document.getElementById("cssid");
var textNode=document.getElementById("Divid");
cssNode.style.textTransform=value;textNode.innerText="text--tranform:"+value+";";
alert(cssNode.style.textTransform);
}<div id="cssid">
 Good good study , Day day up!
</div>
<p></p>
<select id="seId" onchange="change()">
 <option value="none">--text--tranform--</option>
 <option value="capitalize">首字母大写</option>
 <option value="uppercase">所有字母大写</option>
 <option value="lowercase">所有字母小写</option>
</select> 
<p></p>
<div id="Divid">
  text--tranform:none;
</div>问题：当首次单击其中一个显示方式时，可以实现效果，但是当再次单击其它时，都没有了效果。都需要先点击一下“none”，再点击别的才会显示效果。为什么不是直接单击任何一个都直接出来效果呢？？？

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    function init(){
    var se=document.getElementById("se");
    se.onchange=change;
    }
    function change(){
    var div=document.getElementById("test");
    var html=div.innerHTML;
    var index=this.selectedIndex;
    if(index==0){
    html=html.substring(0,1).toUpperCase()+html.substring(1);
    }else if(index==1){
    html=html.toUpperCase();
    }else{
    html=html.toLowerCase();
    }
    div.innerHTML=html;
    }
    window.onload=init;
    </script>
    </head><body>
    <select id="se">
    <option>首字母大写</option>
        <option>所有字母大写</option>
        <option>所有字母小写</option>
    </select>
    <div id="test">just a test</div>
    </body>
    </html>
    这样试试
      

  2.   

    我也测试了楼主的代码，在chrome，ie8,firefox15.0.1 中尝试的，没有问题。(均真是测试)
      

  3.   


    我再次测试，还是出现同一问题：都需要先点击一下“none”，再点击别的才会显示效果
      

  4.   

    我是在dreamweaver， ie8 中测试的，还是有问题啊，O__O"…