- ベストアンサー
セレクトの値を取得できない
<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] と表示されます。 何がいけないのでしょうか？
- cern5100
- お礼率70% (88/125)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
document.getElementById('aaa')で取得しているのは、ID=aaaと設定された セレクト部品（object）そのものだからです。選択されている値を参照する ためには、bbb.valueなど、オブジェクトの属性を参照する必要があります。
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
＞セレクトの値 というからにはせめてvalueをひっぱりましょうよ document.write(bbb.value); きちんとやるなら document.write(bbb.options[bbb.selectedIndex].value);
お礼
まさにその通りでした。 ありがとうございました。
関連するQ&A
- IDの取得、繰り返しに問題があるようなんですが・・・
複数のセレクトの中から選んだ内容をコピーするスクリプトなんですが、 function answerPut(){ var answer = document.getElementById("s1"); var answerCopy = document.getElementById("answer"); answerCopy.value=answer.value } ▲このように単独で１つのフォームからならコピーできたのですが これを複数のフォームに対応させるためにforを使ってみたのですが どうにもうまくいきません。お知恵を拝借いただければ幸いです。 ▼うまくいかないスクリプト <html> <body> <script type="text/javascript"> function answerPut(){ for(var i=1; i<=3; i++){ var answer = document.getElementById(id+i); var answerCopy = document.getElementById("answer"); answerCopy.value=answer.value } } </script> （1）<select name="" id="s1" onChange="answerPut();"> <option value="あ1">あ1</option> <option value="い1">い1</option> <option value="う1">う1</option> </select> （2）<select name="" id="s2" onChange="answerPut();"> <option value="あ2">あ2</option> <option value="い2">い2</option> <option value="う3">う2</option> </select> （3）<select name="" id="s2" onChange="answerPut();"> <option value="あ1">あ3</option> <option value="い2">い3</option> <option value="う3">う3</option> </select> <br> <br> ▼選んだ回答内容が入る<br> <input type="text" name="9" value="" size="40" id="answer"> </body> </html>
- ベストアンサー
- JavaScript
- セレクトで選んだ数の計算方法
初心者なので基本的な質問ですが、よろしくお願いします。 セレクトで選んだ数値が2つあり、その積を表示したいのです。 どうしたらよいでしょうか。 </script> <script langauage="JavaScript"> <!-- function calcNum(){ var num1 = parseInt(document.getElementById('s1').value); var num2 = parseInt(document.getElementById('s2').value); var kei = num1 * num2; } //--> </script> </head> <body> <form name="form1"> <select size="1" name="select2" id="s2" onchange="selectChange()"> <option value="5"> ５</option> <option value="9"> ９</option> </select> </form> <form name="form1"> <select size="1" name="select1" id="s1" onchange="selectChange()"> <option value="2"> ２</option> <option value="12">１２</option> </select> </form> <input type="text" name="kei" size="10"> <input type="button" value="計算" onmousedown="calcNum()"> スクリプトのところだけの抜粋でわかりにくいかもしれないのですが、 どのようにしたら良いか、教えてください。 根本的に違っているようでしたら、どうやればよいのか教えてください。 よろしくお願いします
- ベストアンサー
- JavaScript
- radioボタンの値の取得の仕方？
こんにちは，よろしくお願いします。 ラジオボタンの値でテキストフィールドのような要素をdisabledにしようと考えています。 そこで <input name="AAA" type="radio" id="AAA_0" value="0" checked="checked" onclick="xxx()"/>選択肢Ａ <input name="AAA" type="radio" id="AAA_1" value="1" onclick="xxx()"/>選択肢Ｂ とし，javascriptのxxx functionの中では， if(document.getElementById("AAA").value == 0){ document.getElementById("BBB").disabled = true; }else if(document.getElementById("AAA").value == 1){ document.getElementById("BBB").disabled = false; } } としてみたところ，いつも document.getElementById("AAA").value の値が０のままでいくら選択肢Ｂをクリックしても切り替わりません。 一体何が悪いのでしょうか。教えてください。よろしくお願い申し上げます。
- ベストアンサー
- JavaScript
- セレクトメニューに応じたdivタグの内容
javascriptの質問です。フォーム内のセレクトメニューに応じて表示する配列を選び、複数のdivタグ内に表示したいと思っています。getElementByIdでセレクトメニューにIdをつけて呼び出し、selectedIndexでfunction()をonloadという事ですすめています。 複数のdivタグ内に書き出すのにinnerHTMLを使うんだなというところまでは理解しているつもりですが、上手く動きませんので、どなたかご存知の方にご教授願えればと思います。 <html> <head> <script type="text/javascript"> window.onLoad = function(){ document.getElementById("selected").onChange = function(){ var planTitle = this.selectedIndex; var object = document.getElementById("derection"); var TextData = [[],["text","text"],["text","text"]]; for (var i=0; i<TextData[planTitle].length; i++){ document.write(TextData[i]); } } } </script> </head> <body> <form action=""> <select id="selected"> <option value="title01">title01</option> <option value="title02">title02</option> <option value="title03">title03</option> </select> <div id="direction"></div> <div id="direction"></div> </form> </body> </html>
- ベストアンサー
- JavaScript
- セレクトボックスの値を増やしたい
お世話になります。 セレクトボックスのOPTION値を増やしたいのですが、何か良い方法はないでしょうか。 実現したいことは、ボタンを押したときにテキストボックスの値をセレクトボックスの最下部に表示したいということです。 <INPUT TYPE="text" NAME="add_txt" VALUE=""> <SELECT NAME="lst"> <OPTION VALUE="aaa">aaa <OPTION VALUE="bbb">bbb <OPTION VALUE="ccc">ccc </SELECT> <INPUT TYPE="button" NAME="ent" VALUE="実行"> ------------------ この状態からtextに"ddd"という値を入れて実行ボタンを押した後、 <SELECT NAME="lst"> <OPTION VALUE="aaa">aaa <OPTION VALUE="bbb">bbb <OPTION VALUE="ccc">ccc <OPTION VALUE="ddd">ddd </SELECT> このような状態にしたいのですが、なにか方法はありますか。 ご存知の方いましたら、回答お待ちしています。
- ベストアンサー
- JavaScript
- appendChildでのデフォルト値
お世話になってます。 下記のようにスクリプトを書いてますが、思ったとおりにいかず 困っています。 やりたいのは ボタンとドロップダウンが一つずつあり、ボタンを押すたびに ドロップダウンのコピーが作成されていくという動きです。 ここで、作成するドロップダウンの初期値(例えばBBB)を指定することは できないのでしょうか？ テキストボックスではVALUEもコピーされたので、できそうな 気はするのですが・・・ 以上、宜しくお願いします。 ※ソース載せておきます。 <html> <head> <script> function AddLine(AddID,CpyID){ var nodAddNode; // var nodCpyRoot; // var nodCounter; // var nodCpyNode; // nodAddNode = document.getElementById(AddID); nodCpyRoot = document.getElementById(CpyID); nodCpyNode = nodCpyRoot.cloneNode(true); nodAddNode.appendChild(nodCpyNode); } </script> </head> <body> <INPUT TYPE="BUTTON" CLASS="cbtnFourChar" VALUE="add" onclick="AddLine('aaa','CDKUBN');focus();"> <br /> <br /> <div id="bbb"> <div id="aaa"> <SELECT name="CDKUBN" id="CDKUBN"> <OPTION VALUE=""></OPTION> <OPTION VALUE="3" SELECTED>AAA</OPTION> <OPTION VALUE="5">BBB</OPTION> </SELECT> </div> </div> </body> </html>
- ベストアンサー
- Visual Basic
- セレクトボックスについて
<script type="text/javascript"> function entryChange(){ if(document.getElementById('changeSelect')){ id = document.getElementById('changeSelect').value; if(id == '0'){ document.getElementById('selectbox1').style.display = "none"; document.getElementById('selectbox2').style.display = "none"; document.getElementById('selectbox3').style.display = "none"; } if(id == '1'){ document.getElementById('selectbox1').style.display = ""; document.getElementById('selectbox2').style.display = "none"; document.getElementById('selectbox3').style.display = "none"; } if(id == '2'){ document.getElementById('selectbox1').style.display = "none"; document.getElementById('selectbox2').style.display = ""; document.getElementById('selectbox3').style.display = "none"; } if(id == '3'){ document.getElementById('selectbox1').style.display = "none"; document.getElementById('selectbox2').style.display = "none"; document.getElementById('selectbox3').style.display = ""; } } } window.onload = entryChange; </script> ↑こちらは表示/非表示の処理をしています。 <select id="changeSelect" name="number" onchange="entryChange();"> <option value="0">未選択</option> <option value="1">リスト1</option> <option value="2">リスト2</option> <option value="3">リスト3</option> </select> <select name="number" id="selectbox1" style="display:none"> <option value="東京都">東京都</option> <option value="京都府">京都府</option> </select> <select name="number" id="selectbox2" style="display:none"> <option value="北海道">北海道</option> <option value="沖縄県">沖縄県</option> </select> <select name="number" id="selectbox3" STYLE="display:none"> <option value="兵庫県">兵庫県</option> <option value="大阪府">大阪府</option> </select> <input type="submit" value="送信"> (1)「未選択」のまま送信すると「大阪府」が送信されます。 (2)「リスト1」→「沖縄県」を選択 「大阪府」が送信されます。(リスト2も同じ事になります。) (3)「リスト3」→「兵庫県」を選択 「兵庫県」と送信されます。 リスト3以外を選択するとなぜか「大阪府」が送信されます。 初心者なりに色々調べたのですが解決できず困っております。 よろしくお願いします。
- 締切済み
- HTML
- selectのnameが配列の場合
説明がわかりにくいかもしれませんがよろしくお願いいたします。 セレクトボックスが選択されると、テキストフィールドが変わるというJavaScriptを作成しています。 nameに配列を使った場合、elementsを使用すればいいと言うことまでは分かり１つだけの場合は成功しました。 しかし、同じname(配列)のセレクトボックスとテキストフィールドが複数ある場合は成功しません。 PHPでデータベースに格納する際に、どうしてもセレクトボックスとテキストフィールドは配列にして置かないといけないのですが、この場合どうすれば、成功するでしょうか？ 現在以下のようにソースを書いて失敗しています。 ご教授の程よろしくお願いいたします。 ↓↓JavaScript部分 <script> function selectChange(){ var no = document.test1.elements['member[]'].selectedIndex; if(no==1){ document.test1.elements['point[]'].value =0; } else{ document.test1.elements['point[]'].value =""; } } </script> ↓↓HTML部分 <form name='test1'> <select name='member[]' onChange='selectChange()'> <option value='aaa'>aaa</option> <option value='bbb'>bbb</option> <option value='ccc'>ccc</option> </select> <input name='point[]' type='text'> <br> <select name='member[]' onChange='selectChange()'> <option value='aaa'>aaa</option> <option value='bbb'>bbb</option> <option value='ccc'>ccc</option> </select> <input name='point[]' type='text'> </form> //bbbの場合だけ、テキストフィールドのデフォルト値を0にしたい
- ベストアンサー
- JavaScript
- selectが複数ある場合の値取得について
お世話になります HTML内に下記のようなフォームが複数存在しています。 select[name="page_name"]が変更されたときに値を取得しPHP に送信したいのですが、一番上にあるselectの値が取得されてしまいます。 ひとつのscriptで複数のselectに対応したい場合、どのような記述になりますでしょうか？ 助けていただきたいです。よろしくお願いします。 <!--１番目のセレクト--> <form method="post" action="javascript:void(0);"> <input type="hidden" id="img_id" name="img_id" value="3"> <select name="page_name"> <option value="">選択してください</option> <option id="page_name" value="1">あああ</option> <option id="page_name" value="2">いいい</option> <option id="page_name" value="3">ううう</option> </select> </form> <!--２番目のセレクト--> <form method="post" action="javascript:void(0);"> <input type="hidden" id="img_id" name="img_id" value="4"> <select name="page_name"> <option value="">選択してください</option> <option id="page_name" value="1">あああ</option> <option id="page_name" value="2">いいい</option> <option id="page_name" value="3">ううう</option> </select> </form> <!--３番目のセレクト--> ---省略--- /*script*/ $('select[name="page_name"]').change(function() { var data = { 'page_name' : $('#page_name').val(), 'img_id' : $('#img_id').val() }; $('#name').text(data['img_id']); $.ajax({ type: "POST", url: "/admin/change/", data:data }); alert("画像使用ページを変更しました！"); return false; }); });
- ベストアンサー
- JavaScript
- セレクトボックス自動表示
以前http://okwave.jp/qa/q6872183.htmlにてご質問させていただきました。 合計の数値までだすことはできたのですが、selectboxを数値の分だけだすのができなくて困っています。 <script type="text/javascript"> function calculate(){ var test1 = parseInt(document.getElementById('test1').options[document.getElementById('test1').selectedIndex].value); var test2 = parseInt(document.getElementById('test2').options[document.getElementById('test2').selectedIndex].value); var test3 = parseInt(document.getElementById('test3').options[document.getElementById('test3').selectedIndex].value); var test4 = parseInt(document.getElementById('test4').options[document.getElementById('test4').selectedIndex].value); if(isNaN(test1)){test1 = 0;} if(isNaN(test2)){test2 = 0;} if(isNaN(test3)){test3 = 0;} if(isNaN(test4)){test4 = 0;} document.getElementById('total').innerHTML = test1 + test2 + test3 + test4; } </script> <select name="test1" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <select name="test2" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <select name="test3" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <select name="test4" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <select name="test5" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <p id="total">0</p> がソースになります。 お分かりの方がいらっしゃいましたらご教示お願いします。
- ベストアンサー
- JavaScript
お礼
ありがとうございます。理解しました。