style.backgroundImage는 Firefox에서만 작동합니다.

자바 스크립트에 문제가 있습니다. 다중 선택 상자에서 옵션의 배경 이미지를 설정하려고합니다. 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

선택 상자 스타일로 악명 어렵습니다. 이것은 보통의 컨트롤을 사용하여 가능하지 않습니다. –

우선 : 적절한 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);

출처

2011-03-06 06:19:51

다중 라인 셀렉트 스타일링은 일반적인 CSS에서 작동합니다. 필자가 구축중인 애플리케이션에서 다중 행 선택 상자를 채우는 데 사용되는 값으로 3 차원 배열을 채 웁니다. 콤보 상자의 값을 변경하면 여러 줄 선택 상자를 새 값으로 채워야합니다. 모든 것이 완벽하게 작동하고 여러 줄의 선택 상자 배경 이미지를 수용합니다. Firefox에서는 작동하지만 IE, Chrome 및 Safari에서는 작동하지 않습니다. 배경 이미지 문제에 대한 해결책이 없다면이 문제를 해결하기 위해 다른 디자인을 만들어야한다고 생각합니다. –

style.backgroundImage는 Firefox에서만 작동합니다.

답변

관련 문제