ABC...に
-
0 名前: KUMI : 2006/03/30 19:09
- <FORM NAME="FR01">
<SELECT NAME="p" SIZE="1">
<option>E</option>
<option>A</option>
<option>D</option>
<option>C</option>
<option>B</option>
</SELECT>
</FORM>
のようなフォームがあります。ボタンでオンクリックすると、
ABCDEと並ぶようにするにはどうかけばいいのかわかりません。
sortでもだめなようです。
-
1 名前: m035 : 2006/03/30 19:09 [URL]
- 直接ソートは出来ません。
一度、forループでtextを抜き出して配列に格納してからソートし、
optionに反映させるのが無難だと思います。
<html>
<head>
<title>sort</title>
<script type="text/javascript">
<!--
function option_sort(){
var sel=document.FR01.p.options;
var arr=[];
for(var i=0;i<sel.length;i++){
arr[i]=sel[i].text;
}
arr.sort();
for(var i=0;i<sel.length;i++){
sel[i].text=arr[i];
}
}
//-->
</script>
</head>
<body>
<form name="FR01">
<select name="p" size="1">
<option>E</option>
<option>A</option>
<option>D</option>
<option>C</option>
<option>B</option>
</select>
<input type="button" value="sort" onclick="option_sort()">
</form>
</body>
</html>
-
2 名前: Pid : 2006/03/30 19:09
- >>1
> for(var i=0;i<sel.length;i++){
for (var i = 0, I = sel.length; i < I; i++) のように,あらかじめ sel.length 値を別変数にコピーした方が良いです。理由は下記を参照して下さい。
http://d.hatena.ne.jp/jintrick/20050322
http://d.hatena.ne.jp/takef/20050802/1122982390
http://nanto.asablo.jp/blog/2006/02/21/262269
> sel[i].text=arr[i];
DOM2-HTML 仕様では .text は読取専用となっているので,sel[i].firstChild.data = arr[i]; の方が良いかもしれませんね(なお IE ならば,書き込み可と MSDN に明記されているので構いません)。
* * *
なお,Firefox 1.5 と Safari 2.0 では,
Array.prototype.sort.call (document.forms['FRO1'].elements['p'].options, function (n1, n2) { return n1.text.charCodeAt (0) - n2.text.charCodeAt (0); } );
でいけました(Opera 8.5 は駄目)。HTMLCollection に .sort を転用できるのには吃驚。JavaScript 1.6 なら
Array.sort (document.forms['FRO1'].elements['p'].options, function (n1, n2) { return n1.text.charCodeAt (0) - n2.text.charCodeAt (0); } );
でも良いです。まあ,使えない Tips ですが (^^;)。