javascriptでselectボックスの<OPTION>要素数を取得する方法について

2010/07/22 14:29

このQ&Aのポイント

javascriptでselectボックスの<OPTION>要素数を取得する方法について疑問があります。
データが1件の場合、複数件の場合とで分けて、<OPTION>要素数を取得する処理を記述していますが、データが1件の場合、document.getElementsByName("sel").lengthで正しい値が取得できません。
詳しくは下記のソースを参照していただきたいのですが、(1)、(2)、(4)は、正しい値'5'ですが、(3)だけ誤った値'1'になります。これはなぜでしょうか？javascript初心者のため、初歩的な質問かもしれませんが、教えていただけたら嬉しいです。よろしくお願い致します。

javascriptでselectボックスの<OPTION>要素数の取

javascriptでselectボックスの<OPTION>要素数の取得する方法について疑問があります。データが1件の場合、複数件の場合とで分けて、 <OPTION>要素数を取得する処理を記述していますが、データが1件の場合、 document.getElementsByName("sel").length で正しい値が取得できません。詳しくは下記のソースを参照していただきたいのですが、 (1)、(2)、(4)は、正しい値'5'ですが、 (3)だけ誤った値'1'になります。これはなぜでしょうか？ javascript初心者のため、初歩的な質問かもしれませんが、教えていただけたら嬉しいです。よろしくお願い致します。 -------------------------------------- <HTML> <HEAD> <SCRIPT language="JavaScript"> 　　function getSelLen(){ var oForm = document.form1; var sObj; var sObj2; //チェックボックスの数でデータが複数件か1件か判別しています。 if(oForm.chk.length){ //データが複数件の場合 for ( var i = 0; i < oForm.chk.length; i++ ) { sObj=document.getElementsByName("sel")[i]; alert("(1)　"+ sObj.length); //・・・・(1)　正 sObj2=oForm.elements["sel"][i]; alert("(2)　"+ sObj2.length); //・・・・(2)　正 } }else{ //データが1件の場合 sObj=document.getElementsByName("sel"); alert("(3)　"+ sObj.length); //・・・・(3)　誤 sObj2=oForm.elements["sel"]; alert("(4)　"+ sObj2.length); //・・・・(4)　正 } } </SCRIPT> </HEAD> <BODY> <FORM name="form1"> <TABLE> <TR> <TD> <INPUT type="checkbox" name="chk" > </TD> <TD> <SELECT name="sel" > <OPTION value="" selected> <OPTION value="00">00 <OPTION value="01">01 <OPTION value="02">02 <OPTION value="03">03 </TD> </TR>   </TABLE> </FORM> <FORM name="form2"> <INPUT type="button" onClick="getSelLen()" value=" selectの要素数 "> </FORM> </BODY> </HTML>

relax_bears
お礼率50% (2/4)

JavaScript
回答数4
ありがとう数3

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2010/07/22 23:56 回答No.4

getElementsByName()は必ず配列になりますから、 <select name="sel">が１つであっても、<select>を１つだけ取得したい場合は[0]という指定が必要です。 }else{//データが1件の場合 sObj=document.getElementsByName('sel')[0];　// 訂正箇所 alert("(3)　"+ sObj.length);//・・・・(3)　誤 sObj.lengthの値は、 sObj=document.getElementsByName('sel')とした場合は<select name="sel">の個数、 sObj=document.getElementsByName('sel')[0]とした場合は、１つめの<select name="sel">の<option>の個数になります。この動作（配列になるかならないか）はform.elements['sel']の動作と異なります。なお、複数のフォームフィールドに同じnameが指定されていても問題ありません。それで送信に失敗する場合は、通常はデータを受け取るCGIアプリケーションのバグです。 PHPで受け取る場合は、通常はname="name[]">のように四角カッコを付ける必要がありますが、HTMLとしては文法違反になります。 <select>に multiple を指定する場合も四角カッコが必要です。

質問者

お礼 2010/07/23 10:06

まさに！私が頂きたかった回答です！ありがとうございます。 document.getElementsByName('sel')[0]; で試してみたら、うまく動作しました。あと、同じnameが複数指定されている件は、開発上どうしようもないことで、送信エラーになることはありません。とても勉強になり、疑問が解消してスッキリしました。ありがとうございました。

その他の回答 (3)

fujillin
ベストアンサー率61% (1594/2576)

2010/07/22 16:29 回答No.3

なんだか勘違いをなさっているみたい。＞alert("(3)　"+ sObj.length);//・・・・(3)　誤 sObjは直前のsObj=document.getElementsByName("sel")なので、要素が1個なら1が返ってきて当然です。前半でも同じことをやれば、2などが返ってくるはず。（ご提示のコードにはありませんが）前半で表示させているsObj.lengthは、sObj=document.getElementsByName("sel")[i]なので意味が違います。というかselect要素のOption数を見るのなら、sObj.Options.lengthのほうが安全かも。＜スクリプトに関して＞ select要素の数を判別するのにinput要素の数で判定しているみたいですが、直接select要素の数を見るのが本来のはず。必ず1対1に対応しているとしても、input要素からみるのなら、それに対応するselect要素を探すという手順になりそう。（こちらの方が面倒ですが）もっとも、表示させるだけなら場合分けをしなくてもできそうですけど… 前半でforでまわしているのにも関わらず、ループの中で個別の処理をしているのはおかしいのでは？（コードをそのままで、対象の要素数を3、4…と増やしてみればわかると思います。）＜ＨＴＭＬに関して＞ #1様が既に指摘なさっていますが、ひとつのformの中に同じnameの要素が複数あるのは、formとして問題なのでは。（送信した時を考えてみればわかるはず）（その他直接関係はありませんが） selectタグの閉じタグは省略可能でしたっけ？（よく覚えてませんが…）タグは小文字を利用する習慣をつけておいたほうが良いかも… 例示からは読み取れませんが、レイアウト用のtable使用は避けた方がよろしいかと。いろいろ書きましたが、以下サンプルとして。（1個でも複数でも同じ処理の例。　whileはforに変えても同様にできます。） function getSelLen(){ var i = 0, res = "", sel = document.forms["form1"].getElementsByTagName("SELECT"); while (sel[i]) res += "No " + i + " : options = " + sel[i++].options.length + "\n"; alert(res); }

質問者

お礼 2010/07/23 09:51

私の勘違いについて、ご指摘いただき理解できました。ありがとうございます。そして、ソースについてもご指摘、サンプルまで作っていただいて、ありがとうございました。実際に開発しているものをだいぶ省略・簡略し、疑問点がわかるように書いたつもりだったのですが、逆におかしくなってしまったようで、、、。とても勉強になりました。ありがとうございました。