それなりブログ

とあるWebエンジニアのそれなりのブログ、JavaScript/Node.js/Python/PHP/ゲーム作成 など

複数行select要素が1行表示になる

sizeで複数行を指定したselectタグの表示で問題があったという
javascriptのクロスブラウザ(糞IE6用)ネタです。
普通にセレクトボックスをbodyに追加している例ですが

var select = document.createElement("select");
select.size = 5;
document.body.appendChild(select);

これは問題ありません。

一方これは

var select = document.createElement("select");
select.size = 5;
select.style.display = "none";
document.body.appendChild(select);
// id="hoge_trigger"の要素のonclickにイベントを追加
document.getElementById("hoge_trigger").onclick = function(){
select.style.display = "inline";
};

onclickイベントを呼べば複数行selectボックスが表示されるはずの例ですが
IE6だとsize=1のselectボックスになってしまう。(FireFoxはOK)

対策は

document.getElementById("hoge_trigger").onclick = function(){
select.style.visibility = "hidden";
select.style.display = "inline";
// 時間差を入れて可視にしてみる
setTimeout(function(){
select.style.visibility = "visible";
}, 100);
};

これで期待通りに表示されます。
描画が間に合わない?ような感じ。

知らねーよ、マジで。
3hハマり


コメントを残す

メールアドレスが公開されることはありません。

Categories

Archives