Home/ Questions/Q 4028258
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T11:11:54+00:00

I have a problem with Javascript. I’m trying to set a background image for

  • 0

I have a problem with Javascript. I’m trying to set a background image for an option in a multi select box. This works with Firefox 3.6.14, but not with Internet Explorer 8. I have made a short code sample to show you the problem. Does anyone have a solution for my problem?

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First of all: Try to set appropriate CSS properties “by hand”, directly in CSS; I’m afraid IE8 doesn’t allow change the background-image property on multi-line selectbox.

    If so, try to use standard DOM methods like appendChild() and createElement() to proper create DOM element:

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

    testSelect.appendChild(opt);
    • 0