IEにjQueryでselectのoptionを追加できない

1月 26th, 2008 admin Posted in javascript | コメントは受け付けていません。

JSONでとってきたデータを使ってselectのoptionを作っていた。
最初は

var html = "";
html = '<option value="" selected="selected">選択してください</option>';
$(html).appendTo("#select_box");
for (var i = 0; i < list.length; i++) {
	if(list[i][name_index] == family){
		html = '<option value="' + list[i][year_index] + '">' + list[i][year_index] + '</option>';
		$(html).appendTo("#select_box");
	}
}

こんな感じで

にHTMLを追加していく方法でやっていた。
しかし問題が2点、この方法で追加するとIE6では最後に追加した要素が選択状態になってしまう
しかもselectedIndexとかを使っても変更できない（後入れは評価されない？FireFoxだと動く）
今回の場合はデフォルトでは一番上の「選択してください」を表示していて欲しいので困った。

次にじゃあDOMを使ってやればいいんだろうと思って

$("#select_box").append(new Option("","選択してください"));

for (var i = 0; i < bikeList.length; i++) {
	//重複した名前は使わない
	if(!in_array(list[i][name_index],name_list)){
		$("#select_box").append(new Option(list[i][name_index],list[i][name_index]));
		$(html).appendTo("#select_box");
		name_list.push(list[i][name_index]);
	}
}

こうした、こっちの方が正しいやりかただと思うので正常に動くかと思ったらIEでは表示すらしなくなった。

jQuery で select タグの option タグを増減させるときの注意点 (でぃべろっぱーず・さいど)
http://dev.chrisryu.com/2007/12/jquery_tips_about_add_option_to_selectbox.html

どうもjQueryオブジェクトとの相性が悪いらしい。なので仕方なく

select_box = window.document.getElementById("select_box");
var count = 0;
select_box.options[count++] = new Option("選択してください","");

for (var i = 0; i < list.length; i++) {
	//重複した名前は使わない
	if(!in_array(list[i][name_index],name_list)){
		select_box.options[count++] = new Option(list[i][name_index],list[i][name_index]);
		name_list.push(list[i][name_index]);
	}
}
select_box.selectedIndex = 0;

と普通のjavasCriptで書いたらばっちり動いた。こういう本質と関係ないところではまるのは疲れる。