Javascript style.backgroundImage仅适用于Firefox_Javascript

Javascript style.backgroundImage仅适用于Firefox

javascript

Javascript style.backgroundImage仅适用于Firefox,javascript,Javascript,我对Javascript有问题。我正在尝试为多选框中的选项设置背景图像。这适用于Firefox 3.6.14，但不适用于Internet Explorer 8。我制作了一个简短的代码示例来向您展示这个问题。有人能解决我的问题吗 <html> <head> <script language="javascript" type="text/javascript"> function changeIssueTypes(){ var testS

我对Javascript有问题。我正在尝试为多选框中的选项设置背景图像。这适用于Firefox 3.6.14，但不适用于Internet Explorer 8。我制作了一个简短的代码示例来向您展示这个问题。有人能解决我的问题吗

<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>


函数changeIssueTypes（）{
var testSelect=document.getElementById（“testSelect”）；
var comboBoxTest=document.getElementById（“comboBoxTest”）；
testSelect.options.length=0；
如果（comboBoxTest.value=='optionTest1'）
{
testSelect.options[0]=新选项（）；
testSelect.options[0]。值='testOption1'；
testSelect.options[0].innerHTML='testoption1'；
testSelect.options[0].style.backgroundImage='url(http://www.multimove.nl/images/icons/small/icon_document.gif)';
testSelect.options[0].style.backgroundRepeat='no repeat'；
}
如果（comboBoxTest.value=='optionTest2'）
{
testSelect.options[0]=新选项（）；
testSelect.options[0]。值='testOption1'；
testSelect.options[0].innerHTML='testoption1'；
testSelect.options[0].style.backgroundImage='url(http://www.middelburg.nl/static/middelburgpresentation/images/icons/icon_pdf.gif)';
testSelect.options[0].style.backgroundRepeat='no repeat'；
}
}
选项测试1
选项测试2


测试初始选项

首先：尝试“手动”直接在CSS中设置适当的CSS属性；恐怕IE8不允许更改多行选择框的背景图像属性

如果是，请尝试使用标准DOM方法，如appendChild（）和createElement（）来正确创建DOM元素：

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

    testSelect.appendChild(opt);

众所周知，选择框很难设计。这可能不可能使用普通控件对多行选择框进行分类，因为多行选择框可以与普通CSS一起使用。在我正在构建的应用程序中，我正在用用于填充多行选择框的值填充三维数组。如果更改组合框的值，则必须用新值填充多行选择框。一切正常，接受多行selectbox背景图像。它适用于Firefox，但不适用于IE、Chrome和Safari。如果没有解决背景图像问题的方法，那么我想我必须做另一个设计来解决这个问题。