- ベストアンサー
セレクトボックスの項目ごとにテキストボックスの数値を参照するには??
ranuweの回答
- ranuwe
- ベストアンサー率33% (7/21)
<html> <head> <script type="text/javascript"> function calc(){ with(document.f1){ sumA = new Number(0); sumB = new Number(0); sumC = new Number(0); sumD = new Number(0); sums = new Array(0,0,0,0,0); for(i=1;i<=5;i++){ gramA = s11[s11.selectedIndex].value == i ? parseInt(gs11.value,10) : 0; gramB = s12[s12.selectedIndex].value == i ? parseInt(gs12.value,10) : 0; gramC = s21[s21.selectedIndex].value == i ? parseInt(gs21.value,10) : 0; gramD = s22[s22.selectedIndex].value == i ? parseInt(gs22.value,10) : 0; sums[i] = gramA + gramB + gramC + gramD; } answer.value = (sums[1] * 1 /10) + (sums[2] * 2 /10) + (sums[3] * 3 / 10) + (sums[5] * 4 / 10); } } window.onload=calc; </script> </head> <body> <form name="f1"> 計算結果の計算式<br> 【カロリー(answer)=(a*0.1)+(b*0.2)+(c*0.3)+(d*0.4)】<br> カロリー<input size="20" type="text" name="answer"><br> <br> 朝食<br> 食品1 <select name="s11" onchange="calc()"> <option value="0" selected>選択項目</option> <option value="1">ご飯</option> <option value="2">肉</option> <option value="3">魚</option> <option value="4">野菜</option> <option value="5">牛乳</option> </select> 左で選択した項目のグラム<input size="10" type="text" value="0" name="gs11" onchange="calc()"><br> 食品2 <select name="s12" onchange="calc()"> <option value="0" selected>選択項目</option> <option value="1">ご飯</option> <option value="2">肉</option> <option value="3">魚</option> <option value="4">野菜</option> <option value="5">牛乳</option> </select> 左で選択した項目のグラム<input size="10" type="text" value="0" name="gs12" onchange="calc()" ><br> <br> 昼食<br> 食品1 <select name="s21" onchange="calc()"> <option value="0" selected>選択項目</option> <option value="1">ご飯</option> <option value="2">肉</option> <option value="3">魚</option> <option value="4">野菜</option> <option value="5">牛乳</option> </select> 左で選択した項目のグラム<input size="10" type="text" value="0" name="gs21" onchange="calc()" ><br> 食品2 <select name="s22" onchange="calc()"> <option value="0" selected>選択項目</option> <option value="1">ご飯</option> <option value="2">肉</option> <option value="3">魚</option> <option value="4">野菜</option> <option value="5">牛乳</option> </select> 左で選択した項目のグラム<input size="10" type="text" value="0" name="gs22" onchange="calc()" ><br> </form> </body> </html>
関連するQ&A
- テキスト入力後に選択項目を変更する
ＡＳＰでテキスト項目と選択項目（プルダウン）項目の２つがあり、相互に入力内容を反映してもう一方の値を変更するプログラムを作りたいのですが、方法がわかりません。 例） <script language="javaScript"> <!-- function pfncInpChg(){ var frm = document.formas[0]; ▲▲▲▲▲▲▲▲▲▲ } function pfncSelChg(){ var frm = document.formas[0]; frm.inptxt.value = frm.inpSel.options[frm.inpSel.selectedIndex].value; } //--> </script> <input type=text name=inpTxt onChange="pfncInpChg()"> <select name=inpSel onChange="pfncSelChg()"> <option value="01">月</option> <option value="02">火</option> <option value="03">水</option> <option value="04">木</option> <option value="05">金</option> </select> 選択項目を変更した際にテキスト項目に設定することは出来ます。 逆にテキスト項目に値を入力した時の選択項目のOPTIONを変更する方法がわかりません。 不明な点は▲～▲の部分です。 focus()やselectedではないのは試してみて判りました。 また、表示段階で選択する場合にはOPTIONにselectedを記述する事もわかります。 動的に変更する方法があれば教えていただきたいです。
- ベストアンサー
- HTML
- セレクトボックスの選択項目を変える
セレクトボックスの選択項目を変えるには どうすればいいですか？ <FORM action=./ method=post> <SELECT name=server> <OPTION value=2 selected>2</OPTION> <OPTION value=3>3</OPTION> <OPTION value=4>4</OPTION> </SELECT> </FORM> こういうフォーム（FORMやOPTIONにnameがない）で [4]を選択したいです このフォームを書き換えないで(スクリプトでの書き換えなら○) どうにか変えることはできないでしょうか？ IEのみの対応でいいので、お願いします
- ベストアンサー
- JavaScript
- セレクトボックスとテキストボックスの連動について
セレクトボックスで質問事項を選ぶと、テキストボックスの中に選択した名称が表示される。ということをやりたく下記の様に設定しました。 <script> function hoge(obj){ var f=obj.form; var v=obj.options[obj.selectedIndex].value; var c=f.elements["comment"]; c.value+=v; obj.selectedIndex=0; } </script> <select name="質問事項1" onchange="hoge(this)"> <option value="selected">質問事項を選んでください</option> <option value=“質問1">質問1</option> <option value="質問2">質問2</option> <option value="質問3">質問3</option> </select> <textarea name="comment"></textarea> 現在発生している問題が1点あります。 セレクトボックスで質問を2回選ぶと、選んだ2つの結果がテキストボックス内に連続して表示されます。 例： 1回目 セレクトボックス内 「質問1」を選択 ↓ テキストボックス内 「質問1」が表示 2回目 セレクトボックス内 「質問2」を選択 ↓ テキストボックス内 「質問1質問2」と表示 2回目以降選んだ場合に前回の処理をクリアにして、1つのみ表示させたいと思うのですがどうやればいいのでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- inputの数値を参照しselectによる選択肢で決められた数値を表示したい
JavaScript の素人なもので連続の質問となってしまいました。 下記のように field1 の値を参照し、 selectでの選択肢毎に決められた数値を field2 に表示したいのですが、 どういったscriptにすれば良いか、どなたかご教示をお願い致します。 ┏━━━━━┓ ┃ 例) 150 ┃（必ず1以上の数字が自動で入るinput="text" name="field1"） ┗━━━━━┛ （↓ select） ┏━━━━━━┓ ┏━━━━━┓ ┃ 例) イ ▼┃ ┃ 例) B ┃（結果を表示させたいinput="text" name="field2" ） ┗━━━━━━┛ ┗━━━━━┛ │ イ │ │ ロ │ │ ハ │ └──┘ （select での選択肢） │ イ │ ロ │ ハ │ 二 (field1値) │ │ │ │ 1 ～100 │ A │ F │ J │ O 101～200 │ B │ G │ K │ P 201～300 │ C │ H │ L │ Q 301～400 │ D │ Ｉ │ M │ R 401～500 │ E │ H │ N │ S ※実装する際にはA～Sは数値になります。 以下に素人ながらのソースを記します。 <script type="text/javascript"> <!-- function selectarea(text) { var total = document.form1.field1.value; var choise = document.getElementById("area"); document.form1.field2.value = text; } // --> </script> <form action="" name="form1"> <table> <tr><td><input type="text" name="field1" size="30" value="150"></td></tr> <tr><td> <select id="area" onChange="selectarea(this[this.selectedIndex].value)"> <option selected="selected">選択して下さい</option> <option value="イ">イ</option> <option value="ロ">ロ</option> <option value="ハ">ハ</option> <option value="二">二</option> </select> </td></tr> <tr><td><input type="text" name="field2" size="30"></td></tr> </table> </form>
- ベストアンサー
- JavaScript
- JavaScriptで、SELECTの値で、TEXTを入力可と入力不可
JavaScriptで、SELECTの値で、TEXTを入力可と入力不可に分けたい。 現在、以下のフォームを作成しています。 <form method="post" action="/" name="formname"> <select name="test[0]" size="1" onchange="selectChange(0)"> <option value="A" selected>A</option> <option value="B" >B</option> <option value="C" >C</option> <option value="D" >D</option> </select> <select name="test[1]" size="1" onchange="selectChange(1)"> <option value="A" selected>A</option> <option value="B" >B</option> <option value="C" >C</option> <option value="D" >D</option> </select> <br> <input name="txt[0]" type="text" value="" size="10"> <br> <input name="txt[1]" type="text" value="" size="10"> </form> このフォームで、例えば、selectのtest[0]でvalueの「C」が選択された場合、 txt[0]が入力できないようにしたいと考えています。 また同様に、test[1]でvalueの「C」が選択された場合は、txt[1]が入力出来ないように したいです。 以下のようなJavaScriptを書きましたが、上手く動きません。 function selectChange(value) { var answer = document.formname.elements["test[value]"].selectedIndex; if(answer == "C") { document.formname.elemens["txt[value]"].disabled = false; } else { document.formname.elemens["txt[value]"].disabled = true; } } どなたか教授頂けましたら、幸いです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- プルダウンで別項目に値を代入したい（HTML SELECT)
ホームページのプルダウン項目を選択すると直ぐ下にあるテキスト項目に値を設定するプログラムを作りたいのですが上手くいきません。 HTMLのSELECT句でonchange属性に記述するのは分りますが、その場合にはjavascriptで記述(例：onchange="fncSet();"等)します。 下記は記述を省略しましたが、option項目はＤＢのテーブルから読み込んでセットしています。 <select name=sel onchange="？？？"> <option value=" "> </option> <option value="1">はい</option> <option value="2">いいえ</option> </select> <input type=text name=txt value=""> この場合にselのonchangeで選択した項目の値をtxtに設定するにはどうすればいいのでしょうか？ ＯＳ :WIN2K ブラウザ :IE6 プログラム:HTML(asp,vbscript,javascript)
- ベストアンサー
- HTML
- なぜｇetElementsByNameとgetElementsByIdでセレクトボックスを参照できないでしょうか
初心者ですが、ｇetElementsByNameとgetElementsByIdの使い方はよくわかりません。知っている方がいらっしゃいましたらぜひご教授ください。 下記のソースなんですが、なぜ var arrayObj1 = document.getElementsByName("bsListName"); var arrayObj2 = document.getElementsById("bs"); というふうにセレクトボックス要素を参照することができなくて、javasciptエラーが出てしまう。 もし var arrayObj1 = document.getElementsByName("bsListName"); var arrayObj2 = document.getElementsById("bs"); この2行のソースを削除したら、javasciptエラーがなくなります。 つまり、なぜかｇetElementsByNameとgetElementsByIdでセレクトボックスを参照できないでしょうか <html> <head> <script type="text/javascript"> function refleshNewListName(){ var arrayObj = document.myform.bsListName ; var arrayObj1 = document.getElementsByName("bsListName"); var arrayObj2 = document.getElementsById("bs"); alert(arrayObj.selectedIndex); } </script> </head> <body> 1122 <form name="myform"> <div id="bs"> <select name="bsListName" onChange="refleshNewListName()" > <option value="-1" selected>--新規リスト--</option> <option value="10720" class="my_list">Myリスト</option> <option value="10721" class="recent_sales_list">常用リスト</option> </select> </div> </form> </body> </html>
- 締切済み
- JavaScript
- ２つのセレクトボックスで選ばれた結果をショッピングカートに渡したい
同一ページ内に次の様な２つのセレクトボックスが有ります。 それぞれ選択された内容を足してショッピングカートに送りたいのですがどうしたら良いのでしょうか？ セレクトボックス１ <option value="aaa">aaa</option> <option value="bbb">bbb</option> <option value="ccc" selected="selected">ccc</option> セレクトボックス２ <option value="100">100</option> <option value="200">200</option> <option value="300" selected="selected">300</option> ●セレクトボックス１→aaaを選択 セレクトボックス２→100を選択 ショッピングカートには「aaa100」で渡す ●セレクトボックス１→cccを選択 セレクトボックス２→200を選択 ショッピングカートには「ccc200」で渡す 全くの初心者ですがよろしくお願いします。
- 締切済み
- JavaScript
- セレクト選択時にチェックボックスをオフにしたい
フォームでセレクトを選択すると、連動してチェックボックスをオフにする仕組みを作りたいのですが、分からずjavascriptで解決できないかと思っております。 現在の問題は test1をセレクトし、オプション1のいずれかのチェックボックスにチェックをしたあと、 セレクトを再度し直し、test3を選びオプション3でいずれかのチェックボックスにチェックした場合、 オプション1で選んだチェックボックスの内容も送信されることです。 セレクトで、何かを選択したらチェックボックスがオフされるようになればと思っております。 ちなみに同じページ内にチェックボックスが複数あります。 <html> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function(){ $(".station").addClass('hide'); $("#hoge").change(function(){ $(".station").addClass('hide'); $('#' + $("#hoge option:selected").attr("class")).removeClass("hide"); });}) </script> <style type="text/css"> <!-- .hide{display:none;} --> </style><body><form> <select name="c_s" id="hoge"> <option value="none" selected="selected" class="">選択して下さい</option> <option value="test1" class="c1_1">test1</option> <option value="test2" class="c1_2">test2</option> <option value="test3" class="c1_3">test3</option> </select> <div id="c1_1" class="station opt"> オプション1<br /> <input type="checkbox" name="option1" id="option" value="ch_option1" />ch_option1<br /> <input type="checkbox" name="option2" id="option" value="ch_option2" />ch_option2<br /> </div> <div id="c1_2" class="station opt"> オプション2<br /> <input type="checkbox" name="option11" id="option" value="ch_option11" />ch_option11<br /> <input type="checkbox" name="option12" id="option" value="ch_option12" />ch_option12<br /> <input type="checkbox" name="option13" id="option" value="ch_option13" />ch_option13<br /> </div> <div id="c1_3" class="station opt"> オプション3<br /> <input type="checkbox" name="option21" id="option" value="ch_option21" />ch_option21<br /> <input type="checkbox" name="option22" id="option" value="ch_option22" />ch_option22<br /> </div> </form></body></html>
- 締切済み
- JavaScript
- セレクトボックスとチェックボックスを使った絞込み検索
Yomi-Searchについての質問なのですがタイトルの通りの質問でチェックボックスを使った絞り込み検索では 01_03 04_01 と検索結果に表示されるのですがセレクトボックスとチェックボックスを組み合わせて絞り込み検索をしてみると 01_0304_01 とこのようにカテゴリとカテゴリの間にスペースが入らず絞り込み検索が出来ません‥ タグはこのように書きました。 <FORM action="http://www..." method="get" target="" name="form1"> <INPUT type="hidden" name="mode" value="search"> <INPUT type="hidden" name="page" value="1"> <INPUT type="hidden" name="sort" value="mark"> <INPUT type="hidden" name="engine" value="pre"> <INPUT type="hidden" name="kn" value="30"> <SELECT size="1" name="word"> <OPTION type="selected" value="">--------</OPTION> <option value="01_01" name="word1">○○○</option> <option value="01_02" name="word2">○○○</option> <option value="01_03" name="word3">○○○</option> </SELECT><BR> <BR> <INPUT type="checkbox" name="word4" value="04_01">○○○<BR> <INPUT type="checkbox" name="word5" value="04_02">○○○<BR> <INPUT type="checkbox" name="word6" value="04_03">○○○<BR> <BR> <INPUT type="submit" value=" 検 索 "> <INPUT type="reset" value="リセット"> </FORM> 全くの初心者ですいませんが良きアドレスなどをお願いします。
- 締切済み
- HTML
お礼
再度お答えいただいてありがとうございます。 シンプルなscriptで流れが解りやすく これなら初心者でもなんとか使いこなせそうです。 勉強になりました。 本当にありがとうございました。 あと最後に一つだけお聞きしたいのですが、今回教えていただいた のではform name="f1"ですが、今作りかけのがform id="f1" でしているのでNO.2の回答を参考にして、 Fm = document.getElementById("f1"); with(Fm){ と書き換えたら、ちゃんと計算できたのですが変更すると 何か不都合があるのでしょうか? IDとnameの違いも判ってなくて決まり文句的に使っているレベル なので、極めて初歩的な質問かもしれませんが・・・。 すでに十分教えてもらっていますので、初歩すぎる質問だったらスルーして貰っても構いません。