我有如下代码,设置select被选中的项字体为红色
function setSelectedItemRed(id)
{
try
{  
var mySelect = document.getElementById(id);
var selectedId = mySelect.selectedIndex;
if (parseInt(selectedId) < 0)
{
return;
}
mySelect.options[selectedId].style.color = "red"; }
catch(err)
{
alert(err);
}
}
以上代码,在IE浏览器下,能够同时设置select的文本和option选项字体为红色,
在Chrome浏览器下,只能够设置option选项字体为红色,select的文本内容保持不变,请问,我可以做怎样的修改?或者使用什么属性?

解决方案 »

  1.   

        function setSelectedItemRed(id) {
            try {
                var mySelect = document.getElementById(id);
                var selectedId = mySelect.selectedIndex;
                if (parseInt(selectedId) < 0) {
                    return;
                }
                mySelect.options[selectedId].style.color = "red";
                mySelect.style.color = 'red';        }
            catch (err) {
                alert(err);
            }
        }
      

  2.   

    这样的话,select的所有option都变成红色了哦,所以是不是需要别的属性呢?
      

  3.   

    你没有说清楚设置select文本变红是啥意思,哪变红啊?
      

  4.   


    sorry啊,是这样,一个select在没有下拉的情况下,看起来就像一个textbox,显示的是被选中一项的内容,Chrome下,选择下拉框的时候被选中的option颜色是红色,但是select的 文本内容颜色是黑色。我现要两个颜色同时为红色。目前解决方案:
    <select style="color:red">
      <option style="color:black">
    在javascript中
    mySelect.options[selectedId].style.color = "red";
      

  5.   

    <!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>
    <style type="text/css">
    select{
    color:#F00;
    }
    option{
    color:#000;
    }
    </style>
    <script type="text/javascript">
    function init(){
    var se=document.getElementById("se");
    se.onchange=function(){
    var x=this.selectedIndex;
    var os=this.getElementsByTagName("option");
    for(var i=0;i<os.length;i++){
    os[i].style.color="black";
    }
    os[x].style.color="red";
    }
    }
    window.onload=init;
    </script>
    </head><body>
    <select id="se">
    <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
    </body>
    </html>
    这样??