JavaScriptでプルダウンのサイズを取得

前へ 次へ
このQ&Aのポイント
  • JavaScriptを使用して、プルダウンのサイズ（optionの数）を取得する方法について教えてください。
  • document.getElementById("pulldown").lengthを試したところ、反応がありませんでした。正しい書き方をご教示ください。
  • HTMLのセレクト要素内のオプションの数をJavaScriptで取得したいのですが、どのように書けば良いでしょうか。
回答を見る
  • ベストアンサー

JavaScriptでプルダウンのサイズを取得

JavaScriptにてプルダウンのサイズ(<option>の数)を取得したいと思っています。 document.getElementById("pulldown").length　にて取得できると思うのですが 試してみたところ無反応でした。どう書けばよろしいのでしょうか。 <html> <head> 　　　　<script type="text/JavaScript"> 　　　　　　　　　　　　　　alert(document.getElementById("pulldown").length); 　　　　</script> </head> <body> <form name="form"> <select name="pulldown" id="pulldown"> <option value="5">5</option> </select> </form> </body> </html>

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

  • ベストアンサー
  • Gotthold
  • ベストアンサー率47% (396/832)
回答No.2

> alert(document.getElementById("pulldown").length); この文が実行されたときには、 pulldownというidを持つ要素はまだ構築されていませんから getElementByIdは失敗します。 要素構築後のタイミングで実行するように変更して見てください。 例えば window.onload=function (){ alert(document.getElementById("pulldown").length); };

unko347
質問者

お礼

ご回答ありがとうございます。 ご指摘の通りプルダウン要素が構築された後に 要素数を取得したところ期待通りの結果を得ることが できました。ありがとうございました。

その他の回答 (1)

  • hitomura
  • ベストアンサー率48% (325/664)
回答No.1

document.getElementById("pulldown").getElementsByTagName("option").length かなぁ

unko347
質問者

補足

ご回答ありがとうございます。上記でも結果は同じでした。 ブラウザはIE10を使用しています。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • HTML内の指定の位置にプルダウンを読み込みたい

    まずラジオボタンがあって、 選択するとfunctionに格納してあるプルダウンを ラジオボタンの下の指定した箇所に表示させたいです。 ラジオボタンを変更すると、プルダウンも変わるようにしたいです。 教えてください。お願いします。 <HTML><HEAD> <script type="text/javascript"><!-- function pulldown1(){ document.write('<select name="AAA" size="1">'); document.write('<option value="1-1" selected>1-1</option>'); document.write('<option value="1-2">1-2</option>'); document.write('</select>'); } function pulldown2(){ document.write('<select name="BBB" size="1">'); document.write('<option value="2-1" selected>2-1</option>'); document.write('<option value="2-2">2-2</option>'); document.write('</select>'); } //--></script> <style type="text/css"> </HEAD> <BODY><FORM> <INPUT type="radio" name="rdoSample" onClick="pulldown1()">タイプ１ <BR> <INPUT type="radio" name="rdoSample" onClick="pulldown2()">タイプ２ </FORM></BODY> </HTML>

  • プルダウンのメニューを表示を2つ設定。

    プルダウンのメニューを表示を2つ設定したいのですが、 どこが間違っているのでしょうか。 基本的にjsは、セレクタ名がかぶっていれば、機能しなくなります。 間違いをご指摘ください。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange() { var val1 = document.forms.form1.Select1.value; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value1 == "要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> </body> </body> <script language="javascript" type="text/javascript"> function selectboxChange11() { var val11 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if (val11 == "要素11") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange11();"> <option>---</option> <option value11 == "要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </body> </html>

  • ２つのプルダウンを連動させる

    ２つプルダウンがあったとき片方で選択した内容に応じもう一方のプルダウンの内容が 変更されるように以下のようなコードを書いてみました。 しかし、これだと1番目のプルダウンでAを選択した後、Bを選択しなおすと 2番目のプルダウンの選択肢には前回Aを選んだ時に表示されていた内容が 残ってしまいます。そこで 連動するプルダウンの内容を作成する処理（Forループの処理）の直前で 　for (i=0; i<itemNum; i++) { 　　document.myForm.tableName.options[i] = new Option(null, null); 　} という初期化処理を書いてみたのですが結果は同じでした。 解決するための何か良い方法はございますでしょうか。 <html> <head> <title>プルダウン連動サンプル</title> <script type="text/javascript"> table_name = [["10", "9", "8", "7", "6"], ["りんご", "メロン", "バナナ"], ["嵐"]]; function setMenuItem(n) { itemNum = table_name[n].length; // 項目数 //連動するプルダウンの内容を作成 for (i=0; i<itemNum; i++) { alert(table_name[n][i]); document.myForm.tableName.options[i] = new Option(table_name[n][i], table_name[n][i]); } //プルダウンの先頭を選択 document.myForm.tableName.options[0].selected = true; } </script> </head> <body onLoad="setMenuItem(0)"> <form name="myForm"> <select name="database" onChange="setMenuItem(this.selectedIndex)"> <option selected>A</option> <option>B</option> <option>C</option> </select> <select name="tableName"> </select> </form> </body> </html>

  • jsでプルダウンで選択したものがうまく表示されない

    以下のhtml文があります。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function onButtonClick() { var val = document.forms.form1.textBox1.value; var target = document.getElementById("output"); if (val == "Penguin") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form action="" id="form1"> <div>"Penguin"と入力してください。</div> <input id="textBox1" type="text" value="" /> <input type="button" value="Exec" onclick="onButtonClick();" /> </form> <div id="output"></div> </body> </html> Penguinと入力すると合っていますと表示が出ます。 これを、プルダウン方式にしました。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange() { var val1 = document.forms.form1.Select1.value1; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value1 == "要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> </body> </body> </html> これにすれば、要素１を選択すれば、会っていますと表示されるのですが、されません。 どうしたら改善されますか。

  • プルダウンを2個選び、その結果に基づき、値を返す。

    プルダウンを2個選び、その結果に基づき、値を返したいです。 以下はそのhtml文です。 <!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var value1 = document.forms.form1.Select1.value; var value2 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if ((value == "要素1")&&(value == "要素11")) { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } //--------------------- // </script> </head> <body> <div>プルダウンのメニュー１</div> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value="要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div>プルダウンのメニュー２</div> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange();"> <option>---</option> <option value="要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </html> プルダウンを2個紐づけたいのですが、var value=document.formsの文言を紐づけようとしましたが、 紐づけができません。 ですので、打開案をご教授願えたら幸いです。

  • javascriptでの2つのプルダウンメニューの初期値

    下記の2つの連動するセレクトメニューで最初の国名のプルダウンで「日本」を選択、次の都市名のプルダウンで「東京」を選択し、 その後ブラウザの戻るボタンで戻り後、再びページを表示させたり、または入力内容確認画面へ進みjavascriptのonclick="history.back()"で入力ページ（下記スクリプト記述ページ）に戻ると1つ目の国名のメニューは日本が表示されていますが、2つ目の都市名のメニューが空白になってしまいます。 そのため、都市名のプルダウンで東京を表示させるには、1つ目の国名のプルダウンを一度日本以外にしてから再度日本に表示させるといった動作が必要になってしまっています。 そこで、都市名のメニューを空白にさせずにそのまま表示させるように色々調べたのですが、解決策がありませんでした。 そこで、せめて両方のプルダウンともに「国を選択して下さい」にした状態にはできないかと考えております。 何か良い方法がありましたらば教えて頂けませんでしょうか？ <html> <head> <script type="text/javascript"> window.onload = function(){ document.getElementById("selMain").onchange = function(){ var selNo = this.selectedIndex; var selObj = document.getElementById("selSub"); var optionData = [ ["国名を選択してください,"], ["東京,tokyo","大阪,osaka","名古屋,nagoya"], ["ニューヨーク,ny","ロサンゼルス,la"] ]; var i, tmp = []; while(selObj.hasChildNodes()) { selObj.removeChild(selObj.firstChild); } for (var i=0; i<optionData[selNo].length; i++){ tmp = optionData[selNo][i].split(","); selObj.options[i] = new Option(tmp[0], tmp[1]); } } } </script> </head> <body> <form action="./enq.cgi" method="get" id="mainForm" name="mainForm"> <select id="selMain"> <option value="" selected>国を選択してください</option> <option value="jp">日本</option> <option value="usa">アメリカ</option> </select> <select id="selSub"> <option value="">国を選択してください</option> </select> </form> </body> </html>

  • 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> <!-- 複数件の場合　以下のコメントアウトを解除する --> <!-- <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がIEで機能しない

    ヘッダー内 <script language="JavaScript"> <!-- function view_ctrl() { selectvalue = document.form1.select1.options[form1.select1.selectedIndex].value; if(document.getElementById) { document.getElementById("block1").style.display = "none"; if(selectvalue=="選択１"){ document.getElementById("block1").style.display = "block" } } } // --> </script> ボディー内 <form name="form1"> <select name="select1" onchange="view_ctrl()"> <option value="">選択してください</option> <option>選択１</option> <option>選択２</option> </select> </form> <table><tr><td><div id="block1" style="display:block">表示</div></td></tr></table> Firefox3.6ではうまく選択肢によって表示非表示にできたのですが、IE8では選択１を選択しても非表示のままです どこを修正してやればいいでしょうか？ ぜひ御指南ください。

  • プルダウンメニューの項目をクリックしてもリンク先に

    <HTML> <HEAD> <TITLE>リンク先をプリダウンメニューで表示したい</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function linkMenu(m) { if(m==0)return; document.form01.url.selectedlndex = 0; if(m == 1) document.location="https://www.google.com/?hl=ja&gws_rd=ssl"; if(m == 2) document.location="http://www.yahoo.co.jp/"; } //--></SCRIPT> </HEAD> <BODY> <FORM NAME="form01"> <SELECT NAME="url" onChange="linkMenu(this.selectedlndex)"> <OPTION>クリックして選択してね <OPTION>e-support <OPTION>Office TAKASAKU </SELECT> </FORM> </BODY> </HTML> 以上ですが 　プルダウンメニューの項目をクリックしてもリンク先が開かないのですが！？ 何かミスがあるでしょうか！？ 　宜しくお願いします。

  • プルダウンメニューのリンクで別ウインドウを開く

    下記のようなプルダウンメニューを作成したのですが、同じウインドウ内でリンクするのではなく別ウインドウで開くようにするにはどこを変更すればよいのでしょうか？ head内>>>>>>>>>>>>> <script language="JavaScript" type="text/JavaScript"> <!-- function gotoURL(formName){ var gotoUrl=document.forms[formName].elements[0].options[document.forms[formName].elements[0].selectedIndex].value document.location.href=gotoUrl } --> </script> body内>>>>>>>>>>>>>> <form name="fm0"> <select name="links"> <option selected>＜ここから選択してください＞</option> <option value="aaa.html">あああ</option> <option value="bbb.html">びびび</option> </select> <input name="BUTTON" TYPE=BUTTON onClick="gotoURL('fm0')" VALUE="GO!"></form>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する