- 締切済み
計算された値をselectboxにselectedしたい
セレクトボックスAとセレクトボックスBの選択された値を加算し、その値をセレクトボックスCにselectedしたいです。 計算はできているので後は、セレクトボックスCにselectedするだけですが、その方法がわかりません。 言語はJavascriptとHTMLです。 ご回答お願いします。 現状のソースコードは以下のとおりです。 なお、セレクトボックスAとセレクトボックスBの<option>タグの中身は省略(0～23までの数値)します。 <ソースコード> <html> <head> <script type="text/javascript"> function schedule_end_time(){ var val1=parseInt(document.form1.schedule_start_jikan.value,10); var val2=parseInt(document.form1.work_jikan.value,10); var val3=val1+val2; </script> </head> <body> <form method="GET"> <td><select name="schedule_start_jikan" onchange="schedule_end_time()"></select></td> セレクトボックスA <td><select name="work_jikan" onchange="schedule_end_time()"></select></td> セレクトボックスB <td><select name="schedule_end_jikan"><option value="ここをセレクトボックスAとセレクトボックスBの合計にしたい" selected>××</option> </form> </body> </html>
- spirytus_2
- お礼率0% (0/3)
- JavaScript
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- nda23
- ベストアンサー率54% (777/1415)
SELECTオブジェクトのリストには表示テキスト(text)と値(value)が あります。valueを変えても表示は変化しません。表示内容を変更する 場合は options[n].text = val3; のようにします。 また、合計値が10行目の値と同じで、10行目を選択した状態にしたい 場合は以下の通りです。 document.getElementsByName("schedule_end_jikan")[0].selectedIndex = 9;
- fujillin
- ベストアンサー率61% (1594/2576)
#1です。 ＞>document.getElementsByName('schedule_end_jikan'[0].options[0].value=val3; ＞この方法やったけど、うまいこといきません。 以下のどれかではないかと推測しますが・・・ ◆エラーで実行されない場合 （ブラウザによってエラー表示がでない場合もあります） （１）補足のコードは「）」が抜けていますが、投稿時の記載ミスでしょうか？ （２）実行がどこで止まっているか確認しましたか？ ＞＞計算はできているので後は、～～ とのご質問でしたが、HTML等を適当に修正して実行しても、こちらの 環境では、ご提示のスクリプトの1行目で止まっています。 （ご質問のソースがもともとよくわからないことと、質問がセレクタに代 入する方法だったので、それだけ回答しました） （３）確認の方法としてval3算出後に、 alert(val3); とでもして、計算結果を確認してみてください。 ◆実行されているが、なにも起こらない（または、おかしい） （４）valueに代入しても、画面の表示は何も変化しないはずです。 （これについては、前回回答を参照してください） （５）HTMLの構成が不明ですが、「schedule_end_jikan」という名前 が重複していることはありませんか？ （この場合は、オブジェクトが正しく取得できていない可能性がある ので、インデックス番号を修正してください。）
- fujillin
- ベストアンサー率61% (1594/2576)
う～ん。 いきなり<td>がでてきたり、functionが閉じていなかったりするけど… それに、結果を表示するだけならセレクトボックスよりもテキストフィールドとかテキストエリアとかただの表示文字とかの方が適切だと思うけど… ・・とかいうのはおいておいて、質問事項のみ。 optionのvalue（ここをセレクトボックスAと～）にval3を入れ替えたいなら、 document.getElementsByName('schedule_end_jikan')[0].options[0].value=val3; で入るけど、実行しても画面上は何も変わりません。 表示テキスト（××）のところを変えたいのなら、 document.getElementsByName('schedule_end_jikan')[0].options[0].text=val3; Name指定よりid指定のほうが良いと思うけど、原文にidがなかったので、とりあえずそのままです。
補足
文法的な間違いすみません。 結局なにがしたいかというと 予定開始時間を選択し、 作業時間を選択すると 予定終了時間が自動的に選択されるようにしたいのです。 で、予定終了時間は、変更も可能な仕様なので selectboxに表示したいのです。 >document.getElementsByName('schedule_end_jikan'[0].options[0].value=val3; この方法やったけど、うまいこといきません。