• ベストアンサー
  • 暇なときにでも

リストボックスで指定されたデータの取得

リストボックスに幾つかのデータ(アイテム)を選択した後、 あるボタンを押したら、メッセージボックスを出力し、選択された データ(アイテム)を表示したいのですが、スクリプトではどのように 記述すればよろしいのでしょうか? サンプルは以下の通りです。 <html> <head></head> <SCRIPT LANGUAGE="JavaScript"> <!-- function MODORU( ) { alert(この部分をどう記述したらよろしいのでしょうか?); window.close( ); } //--> </SCRIPT> <body> <form name="fr01"> <table border="0"> <tr> <td> <select size="5" name="D1"> <option>標準</option> <option selected>端子箱右</option> <option>端子箱上</option> <option>両軸</option> <option>  </option> </select> </td> </tr> </table> <INPUT ONCLICK="MODORU()" TYPE="button" VALUE="転写" name="B3">&nbsp; </form> </body> </html>

noname#149114
noname#149114

共感・応援の気持ちを伝えよう!

  • 回答数1
  • 閲覧数55
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • 回答No.1
  • m_nkgw
  • ベストアンサー率47% (42/89)

あまりスマートではありませんが、昔覚えたセオリーどおりだと <html> <head></head> <SCRIPT LANGUAGE="JavaScript"> <!-- function MODORU( ) { var selectedopt = "You selected "; for (var i=0; i<document.fr01.D1.options.length; i++){ if (document.fr01.D1.options[i].selected == true){ selectedopt = selectedopt + document.fr01.D1.options[i].text + " "; } } alert(selectedopt); window.close( ); } //--> </SCRIPT> <body> <form name="fr01"> <table border="0"> <tr> <td> <select size="5" name="D1" multiple> <option>標準</option> <option selected>端子箱右</option> : 以下略 IE5(Windows2000)で動作確認済みです。 ご質問の内容から察しまして、複数選択が可になるようにselectタグにmultipleを追加してあります。

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • リストボックス全選択について

    JavaScriptについて質問です。 リストボックスA,B と プルダウンC という画面項目があると仮定し、 submitボタンを押下したとき、 リストボックスA,Bの項目全てが全選択され、プルダウン項目はそのままにしたいと考えております。 下記のソースのように作成したのですが、 リストボックスが全選択されるところまでは良いのですが、 プルダウン項目が最後の項目が選択された状態になってしまいます。 リストボックスだけが全選択され、プルダウン項目はそのままにするにはどうしたら良いでしょうか。 かなり困ってます。 どなたか助けてください。。 以下ソースです。 <html> <head> <script language="JavaScript"> <!-- function selectAll(){  var str = document.getElementsByTagName("option"); for(i=0;i<str.length;i++){ str[i].selected = true; } } //--> </script> </head> <body> <table> <tr> <td> リストA<br> <select name="listboxA" multiple> <option value="サンプル1">サンプル1</option> <option value="サンプル2">サンプル2</option> <option value="サンプル3">サンプル3</option> </select> </td> <td> リストB<br> <select name="listboxB" multiple> <option value="サンプル4">サンプル4</option> <option value="サンプル5">サンプル5</option> <option value="サンプル6">サンプル6</option> </select> </td> <td> プルダウンC<br> <select name="Pdown"> <option value="サンプル7">サンプル7</option> <option value="サンプル8">サンプル8</option> <option value="サンプル9">サンプル9</option> </select> </td> </tr> </table> <br> <input type=submit value="送信" onClick="selectAll()"> </body> </html>

  • リストボックスの4連

    先日も質問したものなんですがお願いします。 リストボックスで検索すると結果いくつもあるのですが、 いずれもセレクトボックスの様です。 私が教えてほしいのは、リストボックスから選択した項目を次のリストボックス、更に選択し次のリストボックスに・・・と3連続した結果、4番目のリストボックスに答えを表示したいのですが分かりません。 いろいろ調べてこんなのがありましたので引用させていただきましたがこれは2番目で結果が表示します。このソースをいろいろ変更したりしてみたんですが、うまくいきません。どなたか教えてくださいお願いします。 これ以外でも結構です。 <html lang="ja"> <head> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>sample</title> <style type="text/css"> select { width: 100px; } </style> <script type="text/javascript"> //左リスト用連想配列 //キーは0からの連番にして下さい。アイテムが左リストのテキストになります。 var l_Array = { '0' : '大阪', '1' : '京都', '2' : '兵庫', '3' : '奈良', '4' : '滋賀' } //右リストボックス用連想配列 //左リストのvalueをキーにします。 //アイテムはカンマで区切れば幾つにでも出来ます。 var r_Array = { '0' : 'たこ焼き,通天閣', '1' : 'やつはし,清水寺', '2' : '明石焼き,甲子園', '3' : '奈良漬,法隆寺,せんとくん,まんとくん', '4' : '鮒寿司,琵琶湖' } //左リストのオプション群をhtmlソース中に //直接書くのであれば、この関数は実行不要です。 function makeLeft() { var sel = document.getElementById('l_sel'); var i; for (i in l_Array) { var opt = document.createElement('OPTION'); opt.setAttribute('value', i); var tn = document.createTextNode(l_Array[i]); opt.appendChild(tn); sel.appendChild(opt); } } //この関数で右側のアイテムを入替えてます。 //右リストのvalueは、左リストのvalue+0からの連番となります。 function repRight(e) { var sel = document.getElementById('r_sel'); while (sel.hasChildNodes()) { sel.removeChild(sel.firstChild); } var tgt = e.target || e.srcElement var optArray = r_Array[tgt.value].split(','); for (var i = 0; i < optArray.length; i++) { var opt = document.createElement('OPTION'); opt.setAttribute('value', '' + tgt.value + i); var tn = document.createTextNode(optArray[i]); opt.appendChild(tn); sel.appendChild(opt); } } </script> </head> <body onload="makeLeft();"> <!-- makeLeftを実行しない場合は <body> とする --> <table> <tr> <td> <form name="l_frm" id="l_frm"> <select name="l_sel" id="l_sel" size=10 onchange="repRight(event);"> <!-- <option value="0">大阪</option> <option value="1">京都</option> <option value="2">兵庫</option> <option value="3">奈良</option> <option value="4">滋賀</option> --> </select> </from> </td> <td> <form name="r_frm" id="r_frm"> <select name="r_sel" id="r_sel" size=10> </select> </from> </td> </tr> </table> </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>

  • 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.172288で質問したものですが まだJavaScriptを勉強しはじめたばかりでまた壁にぶつかってしまいました。 Bのリストボックスの値をAに追加して他のページにPOSTで送りたいのですが Aに追加された値をすべて送りたいのです。 それで、まずすべての値をとれるかどうかを確認するためにSubmitボタンを押して すべてを表示させるものを作ってみたのですが、どうしても 一番目(つまりiが0のAAAAA)しか表示できません。 エラーも出ないのでどこが間違っているのかがわからないのですが どこが間違っているのでしょうか。 何度もすみませんがよろしくおねがいします。 <html> <head> <title></title> </head> <script type="text/JavaScript"> <!-- function addItem() { A = document.X.A; B = document.X.B; for(var i=0;i<B.options.length;i++) if(B.options[i].selected) A[A.options.length] = new Option(B.options[i].text, B.options[i].value); } function func(){ for(var w=0;w<A.options.length;w++) document.write(A.options[w].text); } // --> </script> <body> <form name="X"> <select size="5" multiple name="A"> </select> <input type="button" value="Copy" onClick="addItem()"> <select size="5" multiple name="B"> <option>AAAAA</option> <option>BBBBB</option> <option>CCCCC</option> </select> </form> <form name="Y"> <input type="button" value="Submit" onClick="func()"> </form> </body> </html>

  • チェックボックス、セレクトボックスを組み合わせた複雑な計算表を作りたい

    下記のような条件を満たす計算表を作りたいのですが、どのように作っていけばいいのか、さっぱり分かりません。 殆ど初心者に近い状態で、このような複雑な計算表を作るのは不可能に近いのは分かっているのですが、是非、ご教授願いたいと思い、質問させて頂きたいです。 <html> <head> <title></title> </head> <body> <form name=all> <table> <tr> <td colspan=2>a</td> <td colspan=7> <input name=AA type=checkbox>AA <input name=BB type=checkbox>BB </td> </tr> <tr> <td colspan=2>b</td> <td colspan=7> <input name=CC type=checkbox>CC <input name=DD type=checkbox>DD </td> </tr> <tr> <td colspan=2>c</td> <td colspan=7><input name=nn type=text></td> </tr> <tr> <td colspan=2>d</td> <td colspan=7> <input name=EE type=checkbox>EE <input name=FF type=checkbox>FF <input name=GG type=checkbox>GG <input name=HH type=checkbox>HH </td> </tr> <tr> <td colspan=2>eA</td> <td colspan=7><input name=PP type=checkbox>PP</td> </tr> <tr> <td rowspan=5>eB</td> <td>e1</td> <td>i1</td> <td colspan=3> <select name=i1> <option>1</option> <option>2</option> </select> </td> <td>I2</td> <td colspan=2> <select name=i2> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td>e2</td> <td>J1</td> <td colspan=3> <select name=j1> <option>1</option> <option>2</option> </select> </td> <td>J2</td> <td colspan=2> <select name=j2> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td>e3</td> <td>K1</td> <td colspan=3> <select name=k1> <option>1</option> <option>2</option> </select> </td> <td>K2</td> <td colspan=2> <select name=k2> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td>e4</td> <td colspan=7> <select name=l1> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td>f5</td> <td colspan=7> <select name=m1> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td colspan=2>f</td> <td>f1</td> <td colspan=3><input name=oo type=text></td> <td>f2</td> <td colspan=2><input name=pp type=text></td> </tr> </table> <br> <input name=keisan1 type=submit value=計算1>  <input name=clear1 type=reset value=クリア1> </form> <br> <table><tr> <td colspan=9> a~dの計<input type=text name=qq>-f1<input type=text name=rr>=ABC<input type=text name=ss> </td> </tr> <tr> <td colspan=9> eA+eBの計<input type=text name=tt>-f2<input type=text name=uu>=DEF<input type=text name=vv> </td> </tr> <tr> <td colspan=9>ABC+DEFの計<input type=text name=ww>×dで選択したときの代入数字=<input type=text name=xx></td> </tr> </table> <br> <input name=kei2 type=submit value=計算2> <input name=clear2 type=reset value=クリア2> </center> </body> </html> 条件として、 ・「a~d」は、必ず入力 ・「e~f」は、該当する場合にのみ ・チェックボックスの行は、どれか1つだけを必ず選択(複数選択した場合、注意を促す) ・セレクトボックスの行は、 該当する場合のみ ・最後に「計算」ボタンを押した時に、未入力の部分(a~d)の注意を促す 計算なのですが、 1.「a」のAAを選択、「b」のCCを選択、「c」に20を入力、「d」のEEを入力したときの場合の計算 その時、「d」のEEには10を代入という形で計算したい。(他のFF=20,GG=30,HH=40) ※「a」のBBを選択した場合は、「d」のEE=15,FF=17,GG=22,HH=27となった場合も 2.上記の条件に加え、「eB」の「e1」は1、「e2」も1を選択、「e4」は2を選択した時の計算 その時、「e1」には「100」を代入、「e2」は「150」を代入、「e4」には「80」を代入で計算したい 3.上記「2」の条件に加え、「f1」に150、「f2」に70と入力した場合、「a~d」の計算合計から「f1」を引き、「e」のAとBの計算合計から「f2」を引く 長くて条件等も分かりづらいかもしれませんが、宜しくお願いします。

  • javascriptでselectボックスの<OPTION>要素数の取

    javascriptでselectボックスの<OPTION>要素数の取得する方法について疑問があります。 データが1件の場合、複数件の場合とで分けて、 <OPTION>要素数を取得する処理を記述していますが、 データが1件の場合、 document.getElementsByName("sel").length で正しい値が取得できません。 詳しくは下記のソースを参照していただきたいのですが、 (1)、(2)、(4)は、正しい値'5'ですが、 (3)だけ誤った値'1'になります。 これはなぜでしょうか? javascript初心者のため、初歩的な質問かもしれませんが、 教えていただけたら嬉しいです。 よろしくお願い致します。 -------------------------------------- <HTML> <HEAD> <SCRIPT language="JavaScript">   function getSelLen(){ var oForm = document.form1; var sObj; var sObj2; //チェックボックスの数でデータが複数件か1件か判別しています。 if(oForm.chk.length){ //データが複数件の場合 for ( var i = 0; i < oForm.chk.length; i++ ) { sObj=document.getElementsByName("sel")[i]; alert("(1) "+ sObj.length); //・・・・(1) 正 sObj2=oForm.elements["sel"][i]; alert("(2) "+ sObj2.length); //・・・・(2) 正 } }else{ //データが1件の場合 sObj=document.getElementsByName("sel"); alert("(3) "+ sObj.length); //・・・・(3) 誤 sObj2=oForm.elements["sel"]; alert("(4) "+ sObj2.length); //・・・・(4) 正 } } </SCRIPT> </HEAD> <BODY> <FORM name="form1"> <TABLE> <TR> <TD> <INPUT type="checkbox" name="chk" > </TD> <TD> <SELECT name="sel" > <OPTION value="" selected> <OPTION value="00">00 <OPTION value="01">01 <OPTION value="02">02 <OPTION value="03">03 </TD> </TR> <!-- 複数件の場合 以下のコメントアウトを解除する --> <!-- <TR> <TD> <INPUT type="checkbox" name="chk" > </TD> <TD> <SELECT name="sel" > <OPTION value="" selected> <OPTION value="00">00 <OPTION value="01">01 <OPTION value="02">02 <OPTION value="03">03 </TD> </TR> --> </TABLE> </FORM> <FORM name="form2"> <INPUT type="button" onClick="getSelLen()" value=" selectの要素数 "> </FORM> </BODY> </HTML>

  • 配列データの受け取り

    下記配列を受け取ることが出来ません。 エラーになります。 受け取り側にARRAY[0],ARRAY[1]と 表示されます。 実際は送信側のinputboxに入力した値を 受け取り側で表示させたいのですが・・・ おかしい箇所ご指摘いただけないでしょうか? それとも、PHPでは出来ないことなのでしょうか? //送信側 <html> <head><title>session.html</title></head> <body> 請求書 <form action="teke.php" method="post"> <table border="1"> <tr align="center"> <td>月</td> <td>日</td> <td>明細</td> <td>単価</td> <td>数量</td> <td>金額</td> </tr> <?php for($q=0;$q<10;$q++){ print"<tr>"; print"<td>"; print"<select name=kosu>\n"; print"<option value=''></option>\n"; for ($i=1; $i<13; $i++){ print"<option value=$i>$i</option>\n"; } print"</select>"; print"</td>"; print"<td>"; print"<select name=kosu>\n"; print"<option value=''></option>\n"; for ($j=1; $j<32; $j++){ print"<option value=$j>$j</option>\n"; } print"</select>"; print"</td>"; for($o=0;$o<4;$o++){ print"<td><input type='text'name='".$data[$q][$o]."'></td>"; } print"</tr>"; } ?> </table> <input type="submit" value="登録"> </body> </html> //受け取り側 <html> <head><title>session.html</title></head> <body> 請求書 <table border="1"> <tr align="center"> <td>月</td> <td>日</td> <td>明細</td> <td>単価</td> <td>数量</td> <td>金額</td> </tr> <?php for($q=0;$q<10;$q++){ print"<tr>"; print"<td>"; print"<select name=kosu>\n"; print"<option value=''></option>\n"; for ($i=1; $i<13; $i++){ print"<option value=$i>$i</option>\n"; } print"</select>"; print"</td>"; print"<td>"; print"<select name=kosu>\n"; print"<option value=''></option>\n"; for ($j=1; $j<32; $j++){ print"<option value=$j>$j</option>\n"; } print"</select>"; print"</td>"; for($o=0;$o<4;$o++){ $data[$q][$o]=$_POST["$data[q][o]"]; $_SESSION["$data[q][o]"].=$_POST["data[$q][$o]"]; print"<td>$data[$q][$o]</td>"; } print"</tr>"; } ?> </table> <input type="submit" value="登録"> </body> </html>

    • 締切済み
    • PHP
  • 選択ボックスで選んだものに応じて値を変更する方法

    片方の選択ボックスで選んだものに応じて もう片方の選択ボックスの表示内容を変更したいと思います。 「なす」を選んだら30円 「きゅうり」を選んだら40円 「ねぎ」を選んだら50円 「選んで下さい。」を選んだら0円(初期値) としたいと思うのですが、下記内容をどのように 変更すればよろしいのでしょうか。 教えて下さい。 <table border="0" width="700"> <tr> <td width="50%"> <select name="野菜"> <option value="SENTAKU">選んで下さい。</option> <option value="NASU">なす</option> <option value="KYUURI">きゅうり</option> <option value="NEGI">ねぎ</option> </select> </td> <td> <select name="値段"> <option value="NEDAN">0円</option> </select> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • セレクトボックスを使った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について書かれてるページを見たのですが理解できなかったのでよろしくお願いします。