option属性の値取得について
- オプションタグの値取得の方法について質問があります。
- opitonタグのvalue属性の値を取得する際、今までは方法Aのコードを用いていましたが、最近調べものをしていますと、方法Bのコードで取得するのが正しいと知りました。
- しかしながら、方法Aであっても方法Bであっても取得する値に差異は見られませんでした。なぜ方法Aでも動作するのでしょうか？
- ベストアンサー
option属性の値取得について
こんばんは。 オプションタグの値取得の方法について質問があります。 opitonタグのvalue属性の値を取得する際、今までは方法Aのコードを用いていましたが、 最近調べものをしていますと、方法Bのコードで取得するのが正しいと知りました。 方法Aでの値の取得についてはGoogle等で検索しましたが、見当たりませんでしたので、 私の思い込みで記述していたのではないかと思われます。 しかしながら、方法Aであっても方法Bであっても取得する値に差異は見られませんでした。 なぜ方法Aでも動作するのでしょうか？ 以上、よろしくお願いいたします。 ＯＳ ：WinXP SP2 ブラウザ：IE6.0 //------------------------------------------------------------------------ // index.htm //------------------------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script language="javascript" src="./main.js"></script> </head> <body> <form name="chara"> <select name="job"> <option value="j01">0</option> <option value="j02">1</option> <option value="j03">2</option> <option value="j04">3</option> <option value="j05">4</option> </select> <input type="button" value="func()" onclick="func()" /> </form> </body> </html> //------------------------------------------------------------------------ // main.js //------------------------------------------------------------------------ function func() { var Job1 = document.chara.job.value; // 方法A var Job2Index = document.chara.job.selectedIndex; var Job2 = document.chara.job.options[Job2Index].value; // 方法B alert( "Job1: " + Job1 ); alert( "Job2: " + Job2 ); }
- y3k
- お礼率90% (48/53)
- JavaScript
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
>古いブラウザなどを考慮しますと、やはり方法Bが望ましいのでしょうか。 どうなんでしょうね？ 私も昔は方法Bを使っていましたが、最近は方法Aにするようにしています。 基本的には古いブラウザっていっても「ものすごく古いブラウザ」なので たぶん方法Aでいいとおもますよ。 できれば情報提供側としては、いくつかのブラウザでチェックしておくのが 望ましいかと思います。
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
古いタイプのjavascriptでは方法Bでしか動作しませんでしたので 「正しい」といえば方法Bなのですが、いまはブラウザが方法Aを 解釈するのが当たり前になってきているので、両方動きます。 方法論から言えば、見たとおり「jobの値を取得する」か 「jobの選ばれた番号とその番号に紐づいたoptionの値を取得する」か なので、手段が違いますが、得られる値は同じです。 別件ですが、最近はformに名前をつけてはいけないことになっているので こんな風に、オブジェクト渡しをするか、idをふって管理します。 <script language="javascript"> function func(f){ var Job1 = f.job.value;//方法A var Job2 = f.job.options[f.job.selectedIndex].value;//方法B alert( "Job1: " + Job1 ); alert( "Job2: " + Job2 ); } </script> <form> <select name="job"> <option value="j01">0</option> <option value="j02">1</option> <option value="j03">2</option> <option value="j04">3</option> <option value="j05">4</option> </select> <input type="button" value="func()" onclick="func(this.form)" /> </form>
お礼
早速のご回答ありがとうございます。 方法Aについてブラウザが解釈してくれるとのことで正直驚いています。 これについて詳細なページがありましたら教えていただけませんでしょうか？ 方法Aは記述方法としてスマートな感じがしており、ぜひ使いたいのですが、 古いブラウザなどを考慮しますと、やはり方法Bが望ましいのでしょうか。
関連するQ&A
- セレクトの値を取得できない
<select name='aaa' id='aaa'> <option value='5'>5</option> <option value='6'>6</option> </select> <script> var bbb = document.getElementById('aaa'); document.open(); document.write(bbb); document.close(); </script> のように書いたのですが [object HTMLSelectElement] と表示されます。 何がいけないのでしょうか？
- ベストアンサー
- JavaScript
- リストボックスに追加した全ての値を取得したいのですが・・・
No.172288で質問したものですが まだJavaScriptを勉強しはじめたばかりでまた壁にぶつかってしまいました。 Bのリストボックスの値をAに追加して他のページにPOSTで送りたいのですが Aに追加された値をすべて送りたいのです。 それで、まずすべての値をとれるかどうかを確認するためにSubmitボタンを押して すべてを表示させるものを作ってみたのですが、どうしても 一番目（つまりiが0のAAAAA）しか表示できません。 エラーも出ないのでどこが間違っているのかがわからないのですが どこが間違っているのでしょうか。 何度もすみませんがよろしくおねがいします。 <html> <head> <title></title> </head> <script type="text/JavaScript"> <!-- function addItem() { A = document.X.A; B = document.X.B; for(var i=0;i<B.options.length;i++) if(B.options[i].selected) A[A.options.length] = new Option(B.options[i].text, B.options[i].value); } function func(){ for(var w=0;w<A.options.length;w++) document.write(A.options[w].text); } // --> </script> <body> <form name="X"> <select size="5" multiple name="A"> </select> <input type="button" value="Copy" onClick="addItem()"> <select size="5" multiple name="B"> <option>AAAAA</option> <option>BBBBB</option> <option>CCCCC</option> </select> </form> <form name="Y"> <input type="button" value="Submit" onClick="func()"> </form> </body> </html>
- ベストアンサー
- JavaScript
- 配列内の値の取得について
FlashBuilderです。 例１のようにすると問題なく取得できるのですが、 例２のようにするとobject,objectという値が返ってきてしまいます。 例２の配列内の値を参照するにはどのようにすれば、宜しいでしょうか？ 例1： var myAry:Array=[]; myAry.push("a","b"); Alert.show(myAry[0]); 例2 var myAry:Array=[]; myAry.push({index:0, souce:"a"}); myAry.push({index:1, souce:"b"}); Alert.show(myAry[0]);
- ベストアンサー
- Flash
- 選択されたラジオボタンの値が取り出せない
フォームを使って普通のHTMLで記述すれば選択された値が 送られてくると思うのですが、エレメントを作って次のような やり方だと、「2」を選択したとしてもvalueが「1」しか返ってきません。 どうすれば適切に値を取り出すことができるのでしょうか？ var element1 = document.createElement("span"); element1.innerHTML = "<input type='radio' name='a' value=1>"; document.body.appendChild(element1); var element2 = document.createElement("span"); element2.innerHTML = "<input type='radio' name='a' value=2>"; document.body.appendChild(element2); ～何かクリックした先でidが「a」のオブジェクトを取得し、選択されてた値を取り出したい～ var ele = document.getElementById("a"); alert(ele.value);←1しか表示されない
- ベストアンサー
- JavaScript
- innerHTMLに代入したインラインフレームのＤＩＶの値の取得について
下記のソースは「読み込み」ボタンを押した時にあらかじめ用意してた<div id="box">にインラインフレームを代入し、「値取得」ボタンを押したら、'sample.html'内のdivの値「keisan」をアラートで表示する記述です。このソース内容を、ボタンのイベントで「keisan」の値を取得するのではなく、<body>のonLoadでページを開いた瞬間にアラートが 出るようにしたいのですが、お分かりになる方はいらっしゃいますでしょうか？ わかりにくい説明ですみません。どうかよろしくお願いします。 <html> <head></head> <body> <div id="box"></div> <input type="button" value="読み込み" onClick="Details.changeURL('sample.html')" /> <input type="button" value="値取得" onClick="Details.showMessage('keisan')" /> </body> <script type="text/javascript"> <!-- var Details = (function(){ var handle = document.getElementById('box'); var buffer = null; return { changeURL: function(url){ handle.innerHTML = "<iframe src=\""+url+"\" id=\"ifr\"></iframe>"; }, showMessage: function(id){ buffer = document.getElementById('ifr').contentWindow.document; alert(buffer.getElementById(id).innerHTML); } } })(); //--> </script> </html>
- 締切済み
- 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> <!-- 複数件の場合 以下のコメントアウトを解除する --> <!-- <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
- オブジェクトから値を取得する方法について
QNo.7391687 の続きで質問をもうひとつお願い致します。 いろいろと調べたり、試行錯誤しながら、 erlectオブジェクトの値を取得して、 取得した値の出力をしたいと考えています。 ご教授頂ければ幸いです。 どうぞよろしくお願いいたします。 【ソース】 ------------------------------------------------------- <head> <title>問合せ入力フォーム</title> <script type="text/javascript"> function textoutput() { <!-- フォームを変数に// --> var formObj = document.form01; <!-- selectを取得// --> var select01 = formObj. select01; <!-- textを結合用の変数として準備// --> var text = '【select01】' + '\n'; text += select01 + '\n'; <!-- output.valueにtextを反映(最後に改行コード)// --> formObj.output.value = text + '\n'; } </script> </head> <body> <form name="form01"> <!--セレクトボタン// --> <strong>・OS確認</strong><br /> <select name="select01"> <option value=""> <option value="Windows7">Windows7 <option value="WindowsVista">WindowsVista <option value="WindowsXP">WindowsXP <option value="WindowsMe">WindowsMe <option value="Windows2000">Windows2000 </select> <br> <!--ログ出力// --> ログ出力<br> <input type="button" value="ログ出力" onClick="textoutput();"><br> <textarea name="output" cols="60" rows="10"></textarea><br> </form> </body> </html>
- ベストアンサー
- JavaScript
- 条件を付けたセレクトメニューの値の取得
JavaScriptで下記の流れの入力フォームを作成しています。 (1)一つ目のセレクトメニューで選択した項目に応じて、もう１つのセレクトメニューの内容を変更する (2)submitボタンを押すと、次のWeb画面で選択した内容を表示する (1)については色々なところのサンプルコードを参考にしつつ、なんとか作成できました。 しかし、(2)は値の受け渡しがうまく出来ずに頭を抱えています。 （unitの値もgroupの値も共に空欄が返ってくる） ◆(1)のコード： 例えばUnit1を選択すると、グループ１（１－１～１－４）が表示され、 Unit2を選択すると、グループ２（２－１～２－４）がセレクトメニューに表示されるというものです。 <TR><TD> <TD><B>Unit</B><BR> <select name="unit" onchange="groupSet()"> <option value="">－選んでください－</option> <option value="">Unit1</option> <option value="">Unit2</option> <option value="">Unit3</option> </select> <TD><B>Group</B><BR> <SELECT NAME="group"> <option value="">－選んでください－</option> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> </select> <script> //グループ１の配列 var group1_list=new Array( "－選んでください－","１－１","１－２","１－３","１－４"); //グループ２の配列 var group2_list=new Array( "－選んでください－","２－１","３－２","３－３","３－４"); //グループ３の配列 var group3_list=new Array( "－選んでください－","４－１","４－２","４－３","４－４"); function buSet(){ //オプションタグを連続して書き換える for ( i=1; i<5; i++ ){ //選択分岐 switch (document.selbox.unit.selectedIndex){ case 0: document.selbox.bu.options[i].text="";break; case 1: document.selbox.bu.options[i].text=group1_list[i];break; case 2: document.selbox.bu.options[i].text=group2_list[i];break; case 3: document.selbox.bu.options[i].text=group3_list[i];break; } } document.selbox.bu.selectedIndex=0;} </script> ◆(2)のやりかた request.getParameter("unit")およびrequest.getParameter("group")で値を取得し、 画面への表示＆ファイルへの保存を行っていますが、選択したgroup○○○の項目ではなく、空欄を取得しているようなのです・・・ どなたか知恵を貸してください。よろしくお願いします。
- ベストアンサー
- JavaScript
- OPTION の値をテキストエリアに
こんにちは。 すみませんが教えてください。 下記の様に作っています。 テキストエリア（note1)に、OPTIONのS・M・Lというように表示させたいのですが、1・2・3というようになってしまったり、エラーがでてしまいます。 どのように変えたらよろしいでしょうか？ ”サイズ”＋＃＃＃＃の所を何回か書き直して見ましたが上手くいきません。 私が何をしたいかというと、 確認ボタンを押したら表記されている文字や数字をテキストエリアに書きたいのです。 よろしくお願いします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT Language="JavaScript"> <!-- A = new Array("\0","\ 1,000","\ 1,200","\ 1,500"); function Fa(x) { document.FM.TE.value = A[x]; } function ctotal() { var totalp=0; var disp1=document.FM.TE.value+" 円 "+" サイズ "+####### ; if(document.FM.TE.value>0) { totalp=parselt(totalp)+parselnt(document.FM.TE.value); } document.form03.note1.value=disp1; } //--> </SCRIPT> </HEAD> <BODY> <FORM name="FM"> <TABLE BORDER="3"><TR><TD> <SELECT name="OP" onChange="Fa(this.selectedIndex);"> <OPTION value="0" selected>0</OPTION> <OPTION value="1">S</OPTION> <OPTION value="2">M</OPTION> <OPTION value="3">L</OPTION> </SELECT></TD><TD> <INPUT size="8" type="text" name="TE" value="0"></TD></TABLE></FORM> <FORM NAME="form03"> <INPUT TYPE="BUTTON"VALUE="確認" onclick="ctotal()"> <TEXTAREA NAME=note1 ROWS=5 COLS=30></TEXTAREA></FORM> </BODY> </HTML>
- ベストアンサー
- JavaScript
- 選択した値を参照する
以下の点で分からない事がございます。 <SCRIPT language="JavaScript"> function selectA(){ var selectFlg = document.getElementById("form1").value; …(A) ・ ・ （中略） ・ } </SCRIPT> ・ ・ （中略） ・ <form> <select name="form1" onchange="selectA()"> <option value="1">あ</option> <option value="2">い</option> <option value="3">う</option> </select> ・ ・ (中略) ・ </form> の文での事ですが、選択したのが「あ」であるとしたら(A)のselectFlg には数字の「1」が入るのではないでしょうか。 また、optionのvalueにどんな文字を入れてもselectFlgには、その値が 代入されますでしょうか。ご教授お願い致します。
- 締切済み
- JavaScript
お礼
ご回答ありがとうございます。 現行どおり方法Aでいきたいと思います。 ありがとうございました。