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

回答

相关问题