次のように、 select タグの内容を JavaScript で生成した場合、 IE では二つ目のプルダウンの横幅が本来のサイズより小さくなってしまう。 Opera や Firefox なら大丈夫。
以下のソース、 Firefox の JavaScript コンソールにはいろいろ言われるけれど気にしない方針で。
<html>
<head>
<script type="text/javascript">
<!--
var authors = new Array("山田芳裕", "井上雄彦", "戸田誠二");
var titles = new Array();
titles[authors[0]] = ["デカスロン", "へうげもの", "度胸星"];
titles[authors[1]] = ["スラムダンク", "バガボンド", "リアル", "カメレオンジェイル"];
titles[authors[2]] = ["生きるススメ", "しあわせ", "唄う骨", "化けの皮"];
function changeAuthor(selform) {
var author = selform.options[selform.selectedIndex].text;
if (author) {
document.all.title.options.length = titles[author].length;
for (var i=0; i<titles[author].length; i++) {
document.all.title.options[i].text = titles[author][i];
}
}
}
function makeOptions() {
for (var i=0; i<authors.length; i++) {
option = document.createElement("option");
option.innerHTML = authors[i];
document.all.author.appendChild(option);
}
for (var i=0; i<authors.length; i++) {
option = document.createElement("option");
option.innerHTML = titles[authors[0]][i];
document.all.title.appendChild(option);
}
}
// -->
</script>
</head>
<body onLoad="makeOptions()">
<select name="author" onChange="changeAuthor(this)">
</select>
<select name="title">
</select>
</body>
</html>次のようにすれば症状は改善される。
