toyosystem » javascript

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

admin — Sat, 26 Jan 2008 13:42:31 +0000

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

var html = "";
html = '';
$(html).appendTo("#select_box");
for (var i = 0; i < list.length; i++) {
	if(list[i][name_index] == family){
		html = ' + list[i][year_index] + '';
		$(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で書いたらばっちり動いた。こういう本質と関係ないところではまるのは疲れる。

特定のクラスの色を変更するjavascript

admin — Wed, 07 Nov 2007 01:10:44 +0000

セルの数が1000個ぐらいのテーブルがあって、その中のマイナスの数字だけ色を赤色にしたかった。
phpで書き出しているので、そっちでspanで囲ったりするようにしても良いのだがスマートじゃない。
幸い数字の入ったセルには右寄せをするためにclass=”num”というのが入っており、prototype.jsも使える

var nums = document.getElementsByClassName('num');
var ret = nums.findAll(
    function(val,key){
        if(val.innerHTML.substr(0,1) == "-"){
              Element.addClassName(val,'clrblue');
        }
    }
);