كيفية تحديث HTML "تحديد" مربع حيوي في IE

Question

ولقد حصلت على HTML "حدد" العنصر الذي أنا استكمال حيوي مع رمز شيئا من هذا القبيل:

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);
}

ويعمل بشكل جيد في فايرفوكس، ولكن IE7 لا تغيير حجم مربع القائمة لاحتواء البيانات الجديدة. إذا كان مربع القائمة فارغة في البداية (والذي هو في حالتي)، بالكاد يمكنك أن ترى أي من الخيارات لقد المضافة. هل هناك طريقة أفضل للقيام بذلك؟ أو وسيلة لرأب الصدع ليصل إلى العمل في IE؟

Answer 1

وتعيين الخاصية 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، لذلك أعتقد أن هذا هو عليه.

(اخترت "HTML داخلي" لأن هذا يعمل عبر المتصفحات لضبط النص الحرفي، لديك لاستخدام "innerText" على IE، و "textContent" على FF، وربما لديك لاختباره في أماكن أخرى كذلك، وطالما لا توجد أحرف خاصة (&، <،>) في خصائص "اسم"، "HTML داخلي" لن يكون كافيا.)

Answer 2

وأنت لا تحتاج إلى التلاعب 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);
}

Answer 3

وبعد إضافة عنصر الخيار، قوة select.style.width إلى auto، حتى لو كان بالفعل auto.

إذا لم تنجح هذه الطريقة، select.style.width واضحة إلى "" ومن ثم استعادة select.style.width إلى auto مرة أخرى.

وهذا يجعل إنترنت إكسبلورر حساب العرض الأمثل للعناصر select.

Answer 4

وتعيين عرض مربع حدد بشكل واضح، وذلك باستخدام سبيل المثال. وCSS 'عرض' أسلوب، بدلا من السماح للمتصفح تخمين عرض من محتوياته.

Answer 5

وقد تتمكن من محاولة استبدال حدد العنصر بالكامل من الكود ولدت، أو الإختراق إزالة عنصر من DOM وreadding ذلك.