style.backgroundImage僅適用於Firefox

我有Javascript的問題。我試圖在多選框中爲一個選項設置背景圖片。這適用於Firefox 3.6.14，但不適用於Internet Explorer 8.我已經做了一個簡短的代碼示例來向您顯示問題。有沒有人有我的問題的解決方案？style.backgroundImage僅適用於Firefox

<html> 
<head> 
<script language="javascript" type="text/javascript"> 
    function changeIssueTypes(){ 
     var testSelect = document.getElementById("testSelect"); 
     var comboBoxTest = document.getElementById("comboBoxTest"); 

     testSelect.options.length = 0; 
     if(comboBoxTest.value == 'optionTest1') 
     { 
      testSelect.options[0] = new Option(); 
      testSelect.options[0].value = 'testOption1'; 
      testSelect.options[0].innerHTML = 'Test option 1'; 
      testSelect.options[0].style.backgroundImage = 'url(http://www.multimove.nl/images/icons/small/icon_document.gif)'; 
      testSelect.options[0].style.backgroundRepeat = 'no-repeat'; 
     } 
     if(comboBoxTest.value == 'optionTest2') 
     { 
      testSelect.options[0] = new Option(); 
      testSelect.options[0].value = 'testOption1'; 
      testSelect.options[0].innerHTML = 'Test option 1'; 
      testSelect.options[0].style.backgroundImage = 'url(http://www.middelburg.nl/static/middelburgpresentation/images/icons/icon_pdf.gif)'; 
      testSelect.options[0].style.backgroundRepeat = 'no-repeat'; 
     } 
    } 
</script> 
</head> 
<body> 
<form> 
    <select id="comboBoxTest" onchange="changeIssueTypes()"> 
     <option value="optionTest1" >Option test 1</option> 
     <option value="optionTest2" >Option test 2</option> 
    </select> 
    <br/> 
    <select multiple id="testSelect"> 
     <option value="initialOption">Test initial option</option> 
    </select> 
</form> 

</body> 
</html>

來源

2011-03-05 Robert-Jan

選擇框是出了名的難風格。這可能無法使用正常的控件 – 2011-03-05 21:45:59

首先：嘗試直接在CSS中設置合適的CSS屬性「手動」恐怕IE8不允許更改多行選擇框中的background-image屬性。

如果是的話，儘量使用例如，appendChild（）和的createElement（）標準DOM方法正確創建DOM元素：

var opt = document.createElement("option"); 
    opt.value = "value"; 
    opt.innerHTML = "blah blah"; 
    opt.style.backgroundImage = "..."; 

    testSelect.appendChild(opt);

來源

2011-03-06 06:19:51

多線選擇框的樣式確實可以與普通的CSS一起工作。在我正在構建的應用程序中，我用填充多行選擇框的值填充三維數組。如果您更改組合框的值，則多行選擇框必須填入新值。一切正常，接受多行選擇框背景圖像。它適用於Firefox，但不適用於IE，Chrome和Safari。如果沒有針對背景圖像問題的解決方案，那麼我認爲我必須做出其他設計來解決這個問題。 – 2011-03-06 08:38:46

style.backgroundImage僅適用於Firefox

回答

相關問題