- ベストアンサー
javascriptでセレクトメニューの選択で３個の変数を表示する方法
- javascriptを使ってセレクトメニューの選択で３個の変数を表示する方法について解説します。
- 質問者は町内会の役割で、３人兄弟の子供の年齢を表示するホームページを作りたいと考えています。
- セレクトメニューで任意の家庭を選択すると、その家庭の３人兄弟の子供の年齢が表示される仕組みを実装する方法を解説します。
- nsm352
- お礼率14% (1/7)
- JavaScript
- 回答数5
- ありがとう数3
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (4)
- babu_baboo
- ベストアンサー率51% (268/525)
var age1 = values[1]; var age2 = values[2]; var age3 = values[3]; で、いいかな。 でも、そこからdocument.writeを使うと、思うようにならないと思うよ。 表示するための方法も、何通りか書いてみたけど、スルーされたか・・・ というか、流れを目で追ってみれば？
補足
babu_babooさんのおっしゃる通り、うまくいきませんでした。 あの、今回の質問では表示するだけだったのですが、ここで方向を変えてもよろしいでしょうか？ セレクトメニューで３個の値を変数に代入する場合、 <select name="●" onChange="■;"> <option value="3,7,11">佐藤家 <option value="13,17,21" selected>鈴木家 <option value="23,27,31">伊藤家 </select> で3,7,11や13,17,21の部分をそれぞれ変数のage1,age2,age3へワンセットで代入したいんですけど、 jsファイル側はどのような記述にすればよいのでしょうか？ var age1 = values[0]; var age2 = values[1]; var age3 = values[2]; のあとの記述と、あと <select name="●" onChange="■;">の●と■の部分をどう記述すればよいのか、分かりません。よろしくお願いします。
- yambejp
- ベストアンサー率51% (3827/7415)
ホントに３人限定でよいのですね？ ４人以上いても３人いることにはかわりないですが？ （今はいなくても、今後４人以上になる可能性はありますね） <script> var brothers={ "佐藤":[3,7,11], "鈴木":[13,17,21], "田中":[1,2,3,4,5] } function hoge(obj){ if(obj.value=="") return false; var v=obj.value; var txt=v+"さんちの"; txt+=brothers[v].length.toString()+"人兄弟の年齢は下から"; txt+=brothers[v].join("歳,")+"歳です"; obj.form.txt.value=txt; } </script> <form> <p> <select onchange="hoge(this)"> <option value="">選んでね</option> <option value="佐藤">佐藤家</option> <option value="鈴木">鈴木家</option> <option value="田中">田中家</option> </select> <hr /> <textarea id="txt" style="width:300px;height:300px;"> </textarea> </p> </form> ただし○○才ってのは、メンテナンスが大変ですよ 誕生日が過ぎたら3才が4才になってしまいますしね・・・ 誕生日で管理するってのはなしですか？ ただ、個人情報なのでそれもどうかという話はありますが・・・
補足
yambejp様、お返事遅くなりまして申し訳ございません。 ここでは３つの変数はどれにあたるのでしょうか？例えば、age1,age2,age3という風に、はっきりと変数を定義して表示することは可能でしょうか？よろしくお願いします。
- babu_baboo
- ベストアンサー率51% (268/525)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title></title> <body> <form action="#" id="a"> <p> <select name="b" onChange="hoge(this)"> <option value="" selected>選んでね <option value="佐藤,3,7,11">佐藤家 <option value="鈴木,2,8,9">鈴木家 <option value="田中,1,2,3">田中家 </select> <input type="text" value="" id="c" size="100"> </p> <p id="d"> </p> </form> <script type="text/javascript"> function hoge( e ) { var options = e.options; var values = options[ e.selectedIndex ].value.split( ',' ); var text = ''; if( 'undefined' !== typeof values[0] ) text += '世帯名:' + values[0] + 'さんの家 '; if( 'undefined' !== typeof values[1] ) text += values[1] + '歳 '; if( 'undefined' !== typeof values[2] ) text += values[2] + '歳 '; if( 'undefined' !== typeof values[3] ) text += values[3] + '歳 '; document.getElementById('c').value = text; document.getElementById('d').innerHTML = text; alert( text ); } </script> </body> </html>
補足
babu_baboo様、お返事遅れまして申し訳ございません。ここで、３つの変数はどれとどれとどれに当たるのでしょうか？ var age1 var age2 var age3 という風に変数を定義した後に document.write(age1); みたいな感じでの表示は無理でしょうか？ よろしくお願いします。
- fujillin
- ベストアンサー率61% (1594/2576)
ご質問のように表示するのだけが目的であれば、3個の変数をつかう必要もないと思われます。（その後で、他の処理も考えているのなら必要かもしれません） 例えば、 「佐藤」―「３人兄弟の年齢は、3歳、7歳、11歳です」 「鈴木」―「２人姉弟の年齢は、15歳、18歳です」 「田中」―「子供はいません」 ・・・・・・・ みたいな、文字列のペアを用意しておけば「3個の変数」とおっしゃっているものは1個の変数で済みませんか？ あるいは、ご質問のように ＞変数を（age1,age2,age3）とした場合、配列を使うのでしょうか？ age1、2、3にそれぞれ数字の3、7、11が入っているとするなら表示するときに文字列として age1 + '歳、' + age2 + '歳、' + age3 + '歳です' のような演算を行なえば、結果として 「3歳、7歳、11歳です」 が得られます。 この方式ですと「兄弟」、「姉妹」・・・などをどうするかで、ご提示のような文章にするにはその文字を記憶しておくか、それぞれの性別も記憶しておいて、計算で「兄弟」、「姉妹」・・・の文字列を作るなどの操作が必要になりそうですね。 さらには、子供がいない場合も考慮に入れて作成する必要があります。 言葉での質問なので、言葉での回答になってしまいましたが、そのデータをそのほかの処理でどのように利用したいのかによって、データの持ち方は変わってくるのではないでしょうか？ ＞配列を使うのでしょうか？ 名前をキーにして同じ形式のデータで扱おうとした時点で、変数をいくつにしようとも（ひとつでも）配列的なデータの持ち方になるでしょう。 例えば、最初の例をそのまま書くならば var data = { '佐藤':'３人兄弟の年齢は、3歳、7歳、11歳です', '鈴木':'２人姉弟の年齢は、15歳、18歳です', '田中':'子供はいません' }; みたいな感じ? これだと、表示するのだけが目的ですけど。
補足
fujillin様、お手数かけます。 私の町内会で、３人兄弟のいる家庭が約５０家族ありまして、その家庭のみに焦点を絞っての事ですので、子供がいないとかのケースはありません。すみません。説明不足で。 あと、表示するだけが目的なのですが、セレクトメニューを選択したときメニューは文字ですが、javascriptでは数値(変数)で処理したいのですが、その流れをスクリプトとして具体的にさし示して頂く事は出来ますでしょうか？申し訳ございませんん。よろしくお願いいたします。
お礼
babu_baboo様、いつもお付き合い頂きありがとうございます。やはりまだ、私のjavascriptに関する知識が乏しいため、ハードルが高いようです。しかし、babu_baboo様のわかりやすい解説で今回は理解できました。ありがとうございました。また新たな質問があるので、今後新しい質問をする時もよろしくお願いします。
補足
babu_baboo様、いつもお付き合い頂きありがとうございます。やはりまだ、私のjavascriptに関する知識が乏しいため、ハードルが高いようです。しかし、babu_baboo様のわかりやすい解説で今回は理解できました。ありがとうございました。また新たな質問があるので、今後新しい質問をする時もよろしくお願いします。