html "select"상자를 동적으로 업데이트하는 방법 IE

StackOverflow https://stackoverflow.com/questions/261362

문제

코드와 같은 코드로 동적으로 업데이트하는 HTML "Select"요소가 있습니다.

var selector = document.getElementById('selectorId');    
for (var i = 0; i < data.length; ++i)
{
  var opt = document.createElement('option');
  opt.value = data[i].id;
  opt.text = data[i].name;
  selector.appendChild(opt);
}

Firefox에서는 잘 작동하지만 IE7은 새로운 데이터에 맞게 목록 상자를 크기로 조정하지 않습니다. 목록 상자가 처음에 비어있는 경우 (내 경우에) 추가 옵션을 거의 볼 수 없습니다. 더 좋은 방법이 있습니까? 아니면 IE에서 작동하기 위해 패치하는 방법?

도움이 되었습니까?

해결책

설정 innerHTML 옵션 객체의 특성 대신 text.

var selector = document.getElementById('selectorId');    
for (var i = 0; i < data.length; ++i)
{
  var opt       = document.createElement('option');
  opt.value     = data[i].id;
  opt.innerHTML = data[i].name;
  selector.appendChild(opt);
}

IE6에서 작동합니다. FF3에서 깨지지 않으므로 이것이 바로 그런 것 같습니다.

(나는 이것이 브라우저에서 작동하기 때문에 "InnerHTML"을 선택했습니다. 문자 그대로 텍스트를 설정하려면 IE에서 "내부 텍스트"와 FF에서 "TextContent"를 사용해야하며 아마도 다른 곳에서도 테스트해야합니다. "이름"속성에 특수 문자 (&, <,>)가 없을 때 "InnerHtml"이면 충분합니다.)

다른 팁

이를 위해 DOM을 조작 할 필요가 없습니다. 대신 이것을 시도하십시오

var selector = document.getElementById('selectorId');  
for (var i = 0; i < data.length; ++i) {
    selector.options[selector.options.length] = new Option(data[i].name, data[i].id);
}

옵션 요소를 추가 한 후 강제 select.style.width 에게 auto, 이미라도 auto.

이것이 작동하지 않으면 명확합니다 select.style.width 에게 "" 그런 다음 복원하십시오 select.style.width 에게 auto 다시.

따라서 Internet Explorer는 최적의 너비를 다시 계산하게합니다 select 집단.

예를 들어 선택 상자의 너비를 명시 적으로 설정하십시오. 브라우저가 내용물에서 너비를 추측하는 대신 CSS의 너비 '스타일.

생성 된 HTML 코드에서 전체 선택 요소를 교체하거나 DOM에서 요소를 제거하고 읽는 해킹으로 시도 할 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top