• 締切済み

JavaScriptのSELECTの値について

JavaScriptについて、質問させてください。 html1からhtml2にSELECTで選択した値を渡すプログラムを作成しています。 下はそのソースです。 <html> <head></head> <body> <form method="POST" action="html2" onSubmit="入力チェック"> <table> <tr> <td>項目A-1</td> <td>項目A-2</td> <td> <select name="selname1"> <option value="0">0</option> <option value="1,11,111">1</option> <option value="2,22,222">2</option> </select> </td> </tr> <tr> <td>項目B-1</td> <td>項目B-2</td> <td> <select name="selname2"> <option value="0">0</option> <option value="3,33,333">3</option> <option value="4,44,444">4</option> </select> </td> </tr> </table> </form> </body> </html> 項目は全部で10ほどあるので、途中省略しています。 SELECTで0以外が選ばれていた場合に、それに関連する項目情報と optionのvalueをhtml2に送信させて、一覧表のように表示させたいと思います。 JavaScriptのDOMやループ文を使うようですが、 私は専門外なので、どのような処理を組めばよいかわかりません。 どなたか、わかる方ご教示願います。

みんなの回答

回答No.1

質問文から推測するとデータベースと関係しそうなので、 BBSで回答できるような内容ではないです。 多分、本一冊くらいできる内容では無いでしょうか。 業者に作ってもらうか、自分で勉強して作るかしてください。 数ヶ月も勉強すれば作れるようになると思います。

関連するQ&A

  • セレクトボックスを使ったJavaScriptでの計算方法

    セレクトボックスから名前を選択して計算する方法を教えてください。 HTMLとJavaScriptは別に分けます。 ----------.html---------- <table border="1"> <tr><td>武器</td> <td><form name="myForm"> <select name="Item" size="1" tabindex="0"> <option value="0">あああああ</option> <option value="1">いいいいい</option> <option value="2">ううううう</option>      ・      ・      ・      ・      ・ </select> </td></tr> <tr><td>OP1</td> <td> <select name="OP1" size="1" tabindex="0"> <option value="0">AAAAA</option> <option value="1">BBBBB</option> <option value="2">CCCCC</option>      ・      ・      ・      ・      ・ </select> </td></tr> <tr><td>OP2</td> <td> <select name="OP2" size="1" tabindex="0"> <option value="0">aaaaa</option> <option value="0">bbbbb</option> <option value="0">ccccc</option>      ・      ・      ・      ・      ・ </select> </td></tr> <tr><td>OP2</td> <td> <select name="OP2" size="1" tabindex="0"> <option value="0">aaaaa</option> <option value="0">bbbbb</option> <option value="0">ccccc</option>      ・      ・      ・      ・      ・ </select> </td></tr> <tr><td colspan="2" align="center"> <input type="button" value="計算する" onclick="Calculation()"> <input type="reset" name="リセット" value="リセット"> </form> </td></tr> <tr><td colspan="2" align="center"> <form name="TxtArea"><input type="text" name="myResult" size="20"> </form> </td></tr> </table> .jsではItemをbox1、OP1をbox2、OP3をbox3、OP3をbox4としています。 box1[0]=10; box1[1]=15; といった感じです。 全部足し算で計算します。 どのようにすれば計算できるのかJavaScriptについて書かれてるページを見たのですが理解できなかったのでよろしくお願いします。

  • フォーム内の値のチェックについて

    このようなフォーム(aspでセレクトボックスの数は可変になります。)にてSubmit時に 同じ値が選ばれていたらalertを出すJavaScriptを作りたいのですが、 どのようなものを作ればよろしいでしょうか? <FORM name="TestForm" action="" method="POST" target=""> <TABLE border="1" cellspacing="0" cellpadding="0" width="100%"> <TR> <td>1位</td> <TD> <select name="Select1"> <OPTION value="449">[選択なし]</OPTION> <OPTION value="465">あ</OPTION> <OPTION value="466">い</OPTION> <OPTION value="467">う</OPTION> </select> <td>2位</td> <TD > <select name="Select1"> <OPTION value="449">[選択なし]</OPTION> <OPTION value="465">あ</OPTION> <OPTION value="466">い</OPTION> <OPTION value="467">う</OPTION> </select> <td>3位</td> <TD> <select name="Select1"> <OPTION value="449">[選択なし]</OPTION> <OPTION value="465">あ</OPTION> <OPTION value="466">い</OPTION> <OPTION value="467">う</OPTION> </select> </TR> </TABLE> <TR><TD> <INPUT type="submit" value=登録 name=B1 onClick=""> </TD></TR> </FORM>

  • javascript 計算フォーム

    見積フォームを作っているのですがjavascript に精通してないので詳しい方教えて頂けますか。 下記のようにnew Arrayで値を取得してますが3つ目の項目”メーカー名”はどれを選んでも金額は同じなので簡単に記述出来ないでしょうか? 合計金額取得後CGIに送信したいので項目名は必要です。 いろいろ検索してみましたが私のスキルでは解決できないのでよろしくお願いします。 ちなみにjavascriptの 計算フォームは部品の共存(セレクトメニューとラジオボタンなど)は出来ませんよね。 ======================================== <html> <head> </head> <script language="javascript"> <!-- n_table1 = new Array(30000,20000,18000,9000); n_table2 = new Array(8000,14800,6980); n_table3 = new Array(3000,3000,3000,3000,3000,3000,3000,3000,3000,3000,3000,3000); function keisan(obj) { var outStr=""; var total=0; total = total + n_table1[document.form1.koumoku1.selectedIndex]; total = total + n_table2[document.form1.koumoku2.selectedIndex]; total = total + n_table3[document.form1.koumoku3.selectedIndex]; outStr = "合計 : ¥" + total; document.form2.outbox.value=outStr; } // --> </script> <body> <center> <br> <form name="form1" METHOD="POST"> <table cellspacing="0" cellpadding="8" border="1" bordercolor="#FFA828"> <tr> <td>商品 A</td> <td> <select name="koumoku1"> <option>Pentium <option>Celeron <option>Athlon <option>Duron </select> </td> </tr> <tr> <td>商品 B</td> <td> <select name="koumoku2"> <option>F2MX200 <option>LE Ultra <option>Kyro </select> </td> </tr> <tr> <td>メーカー名</td> <td> <select name="koumoku3"> <option>A社 <option>B社 <option>C社 <option>D社 <option>E社 <option>F社 <option>G社 <option>H社 <option>I社 <option>J社 <option>K社 <option>L社 </select> </td> </tr> </table> <p> <input type="button" value="計算する" onClick="keisan(this.form)"> </form> <p><br> <form name="form2"> <TEXTAREA NAME="outbox" rows=1 cols=36 wrap="soft"> 計算結果表示 </textarea> </form> </center> </body> </html> ========================================

  • Selectの項目へのアクセス

    Selectを二つ並べ、左で選択されている項目の内容を右のSelectに追加したいのですが、色々わかりません。 ・項目内容を文字列の取得方法は? ・項目の追加方法は? ・項目内容を書き換えるには? 忙しい時期で恐縮なんですが、よろしくお願いいたします。 <title>新しいページ 1</title> <SCRIPT LANGUAGE="JavaScript"> <!--- function list(src,dst){ for(i=0;i<src.length;i++){ if (src.options[i].selected == true) dst.options[0].value = src.options[i].value; } } //---> </SCRIPT> </head> <body> <form method="POST" name="PostForm"> <table border="0" width="100%"> <tr> <td width="7%"> <select size="5" name="MemberList" multiple> <option>A氏</option> <option>B氏</option> <option>C氏</option> <option>D氏</option> <option>E氏</option> <option>F氏</option> </select></td> <td width="70%"> <select size="5" name="AssignedList" multiple> <option> </option> <option> </option> <option> </option> <option> </option> <option> </option> <option> </option> </select></td> </tr> </table> <p><input type="button" value="ボタン" name="B3" onclick="list(MemberList,AssignedList)"></p> </form> </body> </html>

  • JavaScriptの読み込み順

    下記コードを実行すると、プルダウンメニューに値が入る前にボタンがクリックされてしまいます。 どのようなコードを書けば正常に動作するのでしょうか。 ■html内 <html> <head> <title>SCT</title> <script type="text/javascript"> onload = function() { var d = new Date() ; d.setTime((new Date).getTime()) ; newOption = document.createElement('option') ; newOption.value = newOption.innerHTML = d.getFullYear()-1 ; document.getElementById('year').appendChild(newOption) ; newOption = document.createElement('option') ; newOption.value = newOption.innerHTML = d.getMonth()+1 ; document.getElementById('month').appendChild(newOption) ; newOption = document.createElement('option') ; newOption.value = newOption.innerHTML = d.getDate() ; document.getElementById('day').appendChild(newOption) ; } </script> <script type="text/javascript" language="JavaScript" src="./file.js"> </script> </head> <form NAME="Myfm" method="post" action="☆☆URL☆☆"> <body onLoad="yobi()"> <table border="0"> <tr> <td> <select name="startyear" id="year"> </select> </td> <td>年</td> <td> <select name="startmonth" id="month"> </select> </td> <td>月</td> <td> <select name="startday" id="day"> </select> </td> <td>日</td> </tr> <tr> <td> <select name="endyear"> <option value=201>2011 </select> </td> <td>年</td> <td> <select name="endmonth"> <option value=8>8 </select> </td> <td>月</td> <td> <select name="endday"> <option value=1>1 </select> </td> <td>日</td> </tr> <tr> <td><input type="submit" value="集計" NAME="mybut"> </td> </tr> </table> </body> </form> </html> ■file.js内 function yobi(){ document.Myfm.submit(); }

  • JavaScriptお知恵を貸してください

    JavaScriptで以下のHTMLの記述で例えばコンボボックスのCさんを選択して"push"ボタンをおして担当者Aの表示と入れ替わりをしたいのですがなぜか2番目の値が表示されていしまいます。ちょっと原因がわからいのです。 ですがセレクトボックスを開くと順序が最初にCさん次に担当者Bさんとなっているのです。値はちゃんと入れ替わっているのですが表示の方が担当者Bが表示されています。 本来ソースを記載すればいいのですがちょっといそいでいるのと出先というのもありまして以下のHTML程度しか かけませんでした。返事の方は遅れてしまうのですが ご教授おねがいします。 <html> <head> <title></title> <script type="text/javascript"> <!-- //--> </script> <body> <form name="fm"> <table align="center"> <tr><td> <input type="button" name="botan" onClick="push()" value="push"> <select name="test" size="3"> <option value="10">Aさん</option> <option value="20">Bさん</option> <option value="30">Cさん</option> <option value="40">Dさん</option> <option value="50">Eさん</option> </select> <select name="test" size="1"> <option value="1">担当者A</option> <option value="2">担当者B</option> </select> </td></tr> </body> </html>

  • セレクトメニューで選んだ値を同じページの別の場所へ表示する方法

    セレクトメニューで選んだ値を同じHTML内の別の箇所へ表示させる方法がわかりません。 どなたか分かる方が居ましたら、回答お願い致します。 下記のような例です。 <BODY> <FORM method="post" Name="Application" action="bin/regist.cgi" onSubmit="return Check()"> <input type="hidden" name="subject" value="申し込み"><input type="hidden" name="nexthtm" value="index.html"> <CENTER> <SELECT name="RATE" size="1" tabindex="1"> <OPTION>▼選択</OPTION> <OPTION value="ドル">ドル</OPTION> <OPTION value="円" selected>円</OPTION> </SELECT><BR><BR> <TABLE border="0" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD width="90" align="center"><INPUT size="10" type="text" name="PRICE" tabindex="6" onChange="CheckTxt1(this.value);"></TD> <TD></TD> <TD>ここに選んだ単位を表示したい</TD> </TR> </TBODY> </TABLE> <BR> <TABLE border="0"> <TR><TD colspan="3" align="center"> <INPUT type="submit" value=" 送 信 " tabindex="45">    <INPUT type="reset" value=" リセット " tabindex="46"> <BR> </TD></TR> </TABLE> </CENTER> </FORM> </BODY>

    • ベストアンサー
    • HTML
  • セレクトメニューで

    セレクトメニューで フレームを使った、複数のセレクトメニューで 今の状態だと、上のセレクトメニューは問題ないのですが 下のセレクトメニューで選択すると、上のセレクトメニューの「更新」になるだけに なってしまいます。 要所の所だけ、記載しますので間違ってるところを教えてください。 <script type="text/javascript"> <!-- // 設定開始 var target = "right"; // 設定終了 function jump(){ var url = document.form1.select1.options[document.form1.select1.selectedIndex].value; if(url != "" ){ if(target == 'top'){ top.location.href = url; } else if(target == 'blank'){ window.open(url, 'window_name'); } else if(target != ""){ eval('parent.' + target + '.location.href = url'); } else{ location.href = url; } } } // --> </script> </head> <body> <TABLE border="0"> <TBODY> <TR> <TD><form action="#" name="form1"> <select name="select1" onChange="jump()"> <OPTION>  メニュー</OPTION> </select> </form></TD> </TR> <TR> <TD><form action="#" name="form2"> <select name="select2" onChange="jump()"> <OPTION>  メニュー</OPTION> </select> </form></TD>

  • 1ページで2つのフォームをチェックしたいのですが…

    1つのページに同じ項目のフォームを2つ作りました。 そしてそれにチェックを設けたいと思いフォームチェックのスクリプトを入れてみました。 が、しかし、、 上のフォームはチェックが動くのですが、 下のフォームは何を入れてもチェックがエラー検出をして 次のページに進めなくなってしまいます。。 こちらはどのようにしたら両方のチェックが働きつつ 次のページに値を渡せるのでしょうか? 正しい書き方を教えてください。 よろしくお願いします。 <html> <head> <script language="JavaScript"> <!-- // 入力チェック function chkInputForm() { Error = new Array(); i = 0; // お客様の業種入力チェック if (document.forms[0].elements["part"].selectedIndex == 0) { Error[i] = "[ 1・2の選択 ] は必須項目です。"; i++; } // 会社(事務所)のご住所入力チェック if (document.forms[0].elements["pref"].selectedIndex == 0) { Error[i] = "[住まい] は必須項目です。"; i++; } // 未入力があればアラート if (Error.length > 0) { ErrorText = Error.join("\n"); alert ("以下の項目は必須です。\n\n"+ErrorText); return false; } return true; } //--> </script> </head> <body> <form action="inquiry.php" method="post" onsubmit="return chkInputForm()"> <table class="table" summary="お問合せテーブル"> <tbody><tr> <th>1か2</th> <td> <select name="part" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">1</option> <option value="2">2</option> </select> </td> </tr> <tr> <th>住まいは</th> <td> <select name="pref" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">日本</option> <option value="2">海外</option> </select> </td> </tr> </tbody></table> <input class="iepng" name="button" value="送信" type="submit"> </form> <form action="inquiry.php" method="post" onsubmit="return chkInputForm()"> <table class="table" summary="お問合せテーブル"> <tbody><tr> <th>1か2</th> <td> <select name="part" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">1</option> <option value="2">2</option> </select> </td> </tr> <tr> <th>住まいは</th> <td> <select name="pref" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">日本</option> <option value="2">海外</option> </select> </td> </tr> </tbody></table> <input class="iepng" name="button" value="送信" type="submit"> </form> </body> </html>

  • JavaScriptから自ページリンクへ飛ばす方法?

    行数の多い一覧で任意の行にスクロールするのが面倒で、 各行のキーになるような値の入ったドロップダウンリスト(以下DL)を設け、 それを選択して該当行を先頭に表示できないか考えています。 ●画面イメージ  [A |▼] ←DL  |A|データA1|  |A|データA2|  |B|データB1|     :  |Z|データZn| DLには"A"~"Z"までが格納されていて、 例えば"Y"の選択でYの行を先頭に表示できればと思います。 そようなDLと、飛び先アンカー<A>を適宜埋め込んだhtmlを作成しました。 DL選択時のonchangeのJavaScriptで選択値に該当する<A>に飛ばす、 なんてできますでしょうか。 そもそもこんな方法はムリかもと思いつつ、お知恵があればと思い質問いたしました。 どうか宜しくお願い致します。 ●html <html>  <head>   <SCRIPT language="Javascript">    <!--    function onChangeKeyList() {     var v = document.thisForm.keyList.value;     ※ vにDLで選択した値を取り出す。       これを使って<a name="..."/>に何とか飛べないか???     return false;    }    -->   </SCRIPT>  </head>  <body>   <form>    <select name="keyList" onchange="onChangeKeyList();">     <option value="A">A</option>             :     <option value="Z">Z</option>    </select>    <table>     <A name="A" /> ←アンカー     <tr>      <td>A</td><td>データA1</td>     </tr>     <tr>      <td>A</td><td>データA2</td>     </tr>     <A name="B" /> ←アンカー     <tr>      <td>B</td><td>データB1</td>     </tr>         :    </table>   </form>  </body> </html>