1

次のようなコードで動的に更新する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で動作するようにパッチを適用する方法はありますか？

4

5 に答える 5

4

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 では「innerText」、FF では「textContent」を使用する必要があり、おそらく他の場所でもテストする必要があります。 「name」プロパティに特殊文字 (&、<、>) がない場合は、「innerHTML」で十分です)。

于 2008-11-04T10:09:18.120 に答える
4

このために 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);
}
于 2008-11-04T10:33:58.290 に答える
2

option 要素を追加した後、既に であっても、強制的select.style.widthに にします。autoauto

これでうまくいかない場合は、 to をクリアselect.style.widthしてから、再度to""に戻しselect.style.widthてください。auto

selectこれにより、Internet Explorer は要素の最適な幅を再計算します。

于 2012-02-10T20:24:06.643 に答える
0

たとえば、選択ボックスの幅を明示的に設定します。ブラウザにコンテンツから幅を推測させる代わりに、CSS 'width' スタイル。

于 2008-11-04T11:19:50.147 に答える
-1

生成された html コードから select 要素全体を置き換えるか、DOM から要素を削除して readding するハックとして試すことができます。

于 2008-11-04T09:59:49.263 に答える