element.options.lengthとは？

2023/08/15 18:36

このQ&Aのポイント

element.options.lengthは、<select>タグ内の<option>タグの合計数を表しています。
例えば、<select><option></option><option></option></select>の場合、element.options.lengthは2になります。
要素のオプションの数を取得するために使用されるプロパティです。

ベストアンサー

element.options.lengthとは?

2011/10/28 18:27

http://javascriptist.net/ref/element.select.option.value.html のサイトのサンプルコードの２４行目にある for (var i=0;i<element.options.length;i++) { の部分に、element.options.lengthがあります。これは、が入るのでしょうか。 <select> <option></option> <option></option> </select> の場合はelement.options.lengthが2に <select> <option></option> <option></option> <option></option> <option></option> </select> の場合はelement.options.lengthが4に <select> <option></option> </select> の場合はelement.options.lengthが1にというようにelement.options.lengthは <select>の<option>の合計数を常に表しているのでしょうか。

kiseki777
お礼率80% (211/261)

JavaScript
回答数1
ありがとう数1

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

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

ベストアンサー

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

2011/10/28 20:55 回答No.1

そのようです。 https://developer.mozilla.org/en/DOM/HTMLOptionsCollection

質問者

お礼 2011/10/31 09:13

有難うございます。

関連するQ&A

length関数を使う意図は
プログラムレベルは下の下です。　http://okwave.jp/qa/q8146170.html 　以上の質問の中に、ファイル名：sample6.htmlがあります。　その１５行目ですが、 for (var i = 0; i < json.length; i++) {　の lengthですが、ここでlength関数を使う意図は何ですか？　同じプログラムの中にも、分からないことは山ほどあるのですが、まずは、lengthから質問しました。　以上宜しくお願いします。
- ベストアンサー
- 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>
- ベストアンサー
- JavaScript
selectの初期値を設定したい
いつもお世話になります。 javascriptにて、ページを開くと、セレクトボックスの値が、初期値になるようにしようと思ってますがうまくいきません。詳しく書きますと、担当者一覧がセレクトボックスに入っていて、そのページを開くと、ログインしている担当者名が選ばれた状態にしたいのです。 ※たとえば、「山本太郎」でログインしているとすると、ページを開くとセレクトボックスが、　「山本太郎」が選ばれている状態にしたいのです。いろいろ調べて、自分なりにソースを書いてみましたが、うまくいきません。以下ソースになります。 <SCRIPT LANGUAGE="JavaScript" > var tantou = "<%=Rs("作業担当者")%>" var element = document.getElementById("sagyounm"); for (var i=0; i<element.options.length;i++) { if(element.options[i] === 'tantou'){ element.options[i].selected = true; break; }; }; </SCRIPT> Rs("作業担当者")は、ログインした担当者名です。たぶん上記のソースはセレクトが選ばれている値を取得してるだけだと思います。 *********************************************** 以下は、セレクト部分です。 <select name="sagyoutantou" id="sagyounm" required> <option value=""/>---作業担当者選択---</option> <option value="山本　太郎"/>山本　太郎</option> <option value="山下　清"/>山下　清</option> <option value="岡本　次郎"/>岡本　次郎</option> どうにか、初期状態から担当者が選ばれている状態にできないでしょうか。お忙しいとは思いますが、おわかりの方いらっしゃいましたら、どうかご教授お願いします。
- ベストアンサー
- JavaScript
select要素のvalueを配列で取得したいです
select要素のvalueを配列で取得したく、下記のサンプルを動かそうと試みました。 <html> <head></head> <body> <form>  </form> <input type="button" value="はい" onclick="test(this.form)"> <script type="text/javascript"> function test ( form ) { var values = new Array(); for ( var i=0; i < 20; i ++ ) { var elm = form.elements['c'+i]; values[i] = elm.options[elm.selectedIndex].value; } } </script> </body> </html> このようなサンプルを動かそうとしたのですが、 var elm = form.elements['c'+i];のところの['c'+i]が正しくないようで「elm is underfind」というエラーが出てしまいます <script> function myForm (form) { var values = new Array(); for ( var i=0; i<20; i++ ) { var elm = form.elements[i]; values[i] = elm.options[elm.selectedIndex].value; document.write(values[i] + "<br />"); } } </script> インデックス名を'c'+iからiにすると取得できるのですが、ブラウザが読み込みをやめない状態になってしまいます。 select要素のnameはc1から始まりc20と何も換えていません。何が間違っているのでしょうか。
- ベストアンサー
- JavaScript
二つのプルダウンメニューから違うページにジャンプしたい
以前ここで"steel gray"さんから教えて頂いたのですが、自分で手を加えている内に分からなくなってしまいました。ご指導お願い致します。　　　　　　　　function jump(Form){ //以下、selectの組み合わせとジャンプ先のリスト。 var jumpList = new Array( ['1','A','http://www.k2.dion.ne.jp/~namae/osietea1.html'], ['1','B','http://www.google.co.jp/'], ['2','A','http://www.yahoo.co.jp/'], ['2','B','http://www.infoseek.co.jp/'], ['','','']); for(var i=0;i<jumpList.length;i++) { if(jumpList[i][0] == Form.elements[0].value && jumpList[i][1] == Form.elements[1].value) window.location.href=jumpList[i][2]; } } //--> </script> <OPTION value="A">選択肢A</OPTION> 以下選択肢Aに6種類 <OPTION value="1">選択肢B</OPTION> 以下選択肢Bに9種類合計54種類の条件があります。どこをどの様にすればよいのでしょうか？宜しくお願いします。
- ベストアンサー
- JavaScript
複数の<option>と一致するものを表示するには
サンプルで作ったコードは、 <select name="select1">の<option>、 <select name="select2">の<option>、 <select name="select3">の<option>で選び、その下にあるボタンを押すと、 <div class="sample_in">の<dd>タグ内と上記３つの項目に一致するにものだけを表示させたいと考え下記コードを作りました。しかし、select1とselect2は処理が行われません。 select3のみが処理されてしまいます。例えば・・・「1組,男子,おとなしい」を選んだ場合、サンプルでは一致するものは１つしかないのでその親である<div class="sample_in">のみを表示させたいですが、 2組、女子でも表示の対象になり、一致するものが２つになってしまいます。解決に役立つ様なプロパティやメソッドはないでしょうか。ヒントだけでもお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>サンプル</title> <style type="text/css"> #mainBox { width: 300px; border: 3px solid black; padding: 10px; } .sample_in { width: 250px; border: 1px solid SteelBlue; padding: 10px; margin: 20px; } .sample_in dt { color: Magenta; } </style> </head> <body> <form name="myForm" action="#"> <select name="select1"> <option value="指定なし" selected="selected">指定なし</option> <option value="1組">1組</option> <option value="2組">2組</option> <option value="3組">3組</option> </select> <select name="select2"> <option value="指定なし" selected="selected">指定なし</option> <option value="男子">男子</option> <option value="女子">女子</option> </select> <select name="select3"> <option value="指定なし" selected="selected">指定なし</option> <option value="おとなしい">おとなしい</option> <option value="活発">活発</option> <option value="普通">普通</option> </select> <input type="button" value="OK" onclick="test0()"> </form> <div id="sample"> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>おとなしい</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>普通</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>おとなしい</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>活発</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>活発</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>普通</dd></dl> </div> </div> <script type="text/javascript"> function test0() { var div1 = document.getElementById('sample'); var div2 = div1.children; var index1 = document.myForm.select1.selectedIndex; var index2 = document.myForm.select2.selectedIndex; var index3 = document.myForm.select3.selectedIndex; var str1 = document.myForm.select1.options[index1].text; var str2 = document.myForm.select2.options[index2].text; var str3 = document.myForm.select3.options[index3].text; var ary = [str1, str2, str3]; for(m=0; m<ary.length; m++){ for(i=0, len1=div2.length; i<len1; i++){ var dd = div2[i].getElementsByTagName("dd"); for(j=0, len2=dd.length; j<len2; j++){ var ddText = dd[j].textContent; if( ary[m] == ddText ){ dd[j].parentNode.parentNode.style.display = ''; break; }else{ dd[j].parentNode.parentNode.style.display = 'none'; } } } } alert("エラーなし"); //動作確認用 } </script></body></html>
- ベストアンサー
- JavaScript
documentオブジェクトのlengthが取れない
以下のプログラムでobjのlengthが「undefined」となる原因がわからない <script language="JavaScript"></script> <form name="frm" method="POST"><input type="checkbox" name="check" value="1"></form> <a href="javascript:Check();">チェック</a> formの中を以下のように変更すると正しく表示される <form name="frm" method="POST"><input type="checkbox" name="check" value="1"><input type="checkbox" name="check" value="2"></form> どなたか、ご教授くださいませ。
- ベストアンサー
- JavaScript
初歩サンプル（値の型？）でつまづいてます。。
HTMLとスタイルシートしかわからず、初のプログラミング言語としてJavascriptを選びました。とりあえず入門書籍のサンプルを見ながら勉強しているのですが、さっそくfor文というか、値の型？で混乱してます。。【Javascript部分】 function doClick(){ var str = ""; //←(1) var n = document.form1.select1.options.length; for(var i = 0;i < n;i++) if (document.form1.select1.options[i].selected) 　　 str += document.form1.select1.options[i].value + ","; //←(2) var str = "選択項目：" + str ; document.getElementById("showText").innerHTML = str; } 【HTML部分】 <p>※テスト用ページ</p> <div name="showText" id="showText">(※未設定)</div> <form name="form1"> <select name="select1" size="3" multiple> <option value="あいうえお">あいうえお</option> <option value="かきくけこ">かきくけこ</option> <option value="さしすせそ">さしすせそ</option> </select> <input type="button" value="送信" onClick="doClick();"> </form> options.lengthで配列の総数を数えて、真偽値を調べfor文で繰り返し、結果を反映させる部分はわかります。わからない部分は、 (1)「var str = "";」の「""」は空の文字列を代入？ということでしょうか？試しに消し見ると「undefined」が記述されるのですが…… 型を定義してないと起こる？問題のようで、型の宣言のようなものということでしょうか？ (2)str += document.form1.select1.options[i].value + ","; for文中で、最初の一回目は「""+あいうえお+","」、二回目は「""+あいうえお+","+かきくけこ+","」……と繰り返されていくと思うのですが、(1)の意図がわからないので、「""」の空部分の意味が理解できません。たぶんとるに足らない疑問のような気がするのですが…… ご教授いただけるとうれしいです。 ※蛇足なんですが、for文やif文に中括弧{}がついてなくても動きはしますが、つけないのがベターなのでしょうか？（入門書籍なのでスタンダートを書いてるとは思うのですが……）
- ベストアンサー
- JavaScript
is not a functionというエラー
jqueryのスクリプトを書いていたところ $(function () { var wrapper = $("#main"); var wrapperWidth; var blocks = []; NewBlocks(blocks, wrapper.children()); function NewBlocks(blocks, elements) { for (var i = 0; i < elements.length; i++) { var element = elements[i]; var block = new Block(element); blocks.push(block) } } function Block(element) { this.element = element; element.style.margin = "10px"; this.init(); } Block.prototype = { init: function () { this.width = this.element.offsetWidth; this.height = this.element.offsetHeight; } } }); 上記スクリプトを実行すると「this.init is not a function」というエラーが出てしまいます。一体何をどう間違っているせいでエラーが出るのか、どうかご教授いただけますでしょうか。
- ベストアンサー
- JavaScript
型変換を行った後で計算をする方法
ＤＢには、テキスト型で保存している数字があります。それをＪＳＰ側でINT型に変換して、計算を行いたいのですが、何か良い方法はありませんか？下記のままだと常に０が表示されてしまいます。どうか良いアドバイスをお願いします。 function changeYosan() { 　var lstYosan = document.form.elements("_uriageYosan"); 　var lstJisseki = document.form.elements("_uriageJisseki"); 　var lstNobi = document.form.elements("_nobiritsu"); for(i = 0 ; lstYosan.length > i ; i ++ ){ 　　lstNobi[i].value = lstYosan[i].value.replace(",","") / 　　　　lstJisseki[i].value * 100; if(isNaN(lstNobi[i].value)){ 　　lstNobi[i].value = 0; } } }
- ベストアンサー
- JavaScript