的Javascript：<select>項目

下面的代碼集BACKGROUNDCOLOR在FF和Chrome就好了，但是設置不能在IE8 :-(的Javascript：<select>項目

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<script type="text/javascript"> 
    function changeColor(id) 
    { 
    var selectName = "select" + id; 
    var selectElement = document.getElementById(selectName); 
    var selectValue = selectElement.value; 
    var backColor = '#FFFFFF'; 
    if(selectValue == 'No') 
    { 
     backColor = 'lightcoral'; 
    } 
    else 
    { 
     backColor = 'lightgreen'; 
    } 
    selectElement.style.backgroundColor = backColor; 
    } 
</script> 
</head> 
... 
<form name="update" action="update.php" method="post"> 
<select name="select1" id="select1" onchange="changeColor(1);" > 
    <option>No</option> 
    <option selected="selected">Yes</option> 
</select> 
...

工作在IE8的下拉是不會改變它的回。顏色這個功能本身雖然稱爲

如果我這樣做

alert(selectElement.style);

我在IE8中得到有效的對象：[對象的CSSStyleDeclaration]

來源

2014-02-19 Dee J. Doena

使用'selectElement.options [selectElement.selectedIndex] .value'得到當前選定的價值 –

Thx Paul，就是這樣！ –

-1

有很多特定於瀏覽器的CSS屬性。使用jquery沒有這些問題。

來源

2014-02-19 14:15:26 Serginho

這不是答案，而是評論 –

爲什麼不呢？答案是：使用jquery沒有這些問題 – Serginho

告訴用戶只是去使用jQuery不能解決他的問題，因此不是他的解決方案的答案。然而，這是一個合適的評論，因爲這是一個建議或繞過他的問題。這有幫助嗎？ –

保羅是完全正確的。

我正要寫，我注意到，錯誤在於完全elsewere

而不是使用

var selectValue = selectElement.value;

的我現在用

var selectValue = selectElement.options[selectElement.selectedIndex].value;

和它的作品！

謝謝保羅！

來源

2014-02-19 14:18:22

設置backgroundColor直接在<option> -elements：

for (var i=0;i<selectElement.children.length;i++) { 
    selectElement.children[i].style.backgroundColor = backColor; 
}

看到工作小提琴 - >http://jsfiddle.net/4eqx5/

來源

2014-02-19 14:18:29 davidkonrad

更新，小提琴着色的選項，但沒有顏色他們時，一個新的項目被選中 - 這是現在糾正（沒有包裝在頭） – davidkonrad

的Javascript：<select>項目

回答

相關問題