JavaScriptでリストボックスに追加した値を渡す方法

2023/08/08 01:17

このQ&Aのポイント

JavaScriptを使用して作成したフォームで、リストボックスに追加した選択項目をサーバに渡す方法を教えてください。
リストボックスが2つあり、一方には候補一覧があり、もう一方には選択項目を追加していくかたちのフォームを作成しました。選択項目をサーバに渡すための具体的な方法を知りたいです。
Hidden項目に選択した値をセットする方法があることは分かりましたが、具体的な手順が分からないので、詳しく教えてください。

ベストアンサー

JavaScriptでリストボックスに追加した値を渡したい

2008/06/30 02:32

リストボックスが２つあり、一方には候補一覧があり、追加ボタンでもう一方に選択項目を追加していくようなフォームを作りました。で、選択項目をsubmitでサーバへ渡したいのです。いろいろ調べると、Hidden項目にセットしておく方法があることは分かったのですが、具体的にどうしたらよいのでしょうか？以下、長いですが、ソースです。 <script language="JavaScript"> //グローバル変数の設定 //コンボボックスの表示内容 cbnum = 2; //コンボボックスの項目数 cbdata = new Array(cbnum); cbdata[0] = "グループ"; cbdata[1] = "メンバー"; lbnum1 = 2; lbdata1 = new Array(lbnum1); lbdata1[0] = "TEST_G1"; lbdata1[1] = "TEST_G2"; lbnum2 = 2; lbdata2 = new Array(lbnum2); lbdata2[0] = "TEST_USER1"; lbdata2[1] = "TEST_USER2"; //lb1表示用 function ch_lb1(fm) { var selv = fm.cb1.options[fm.cb1.selectedIndex].value; if(selv == 0) { fm.lb1.length = lbnum1 for(i=0; i < lbnum1; i++) fm.lb1.options[i].text = lbdata1[i]; } else { if(selv == 1) { fm.lb1.length = lbnum2 for(i=0; i < lbnum2; i++) fm.lb1.options[i].text = lbdata2[i]; } else { fm.lb1.length = lbnum3 for(i=0; i < lbnum3; i++) fm.lb1.options[i].text = lbdata3[i]; } } } //lb2表示用 function add_lb2(fm) { var lb1len = fm.lb1.length; var lb2len = fm.lb2.length; var aditem = new Array(); for(i=0,j=0; i < lb1len; i++) { //選択されているかのチェック if(fm.lb1.options[i].selected) { flg = 0; for(k=0; k < lb2len; k++) { tmp = fm.lb1.options[i].text; //同じ項目がすでに登録されていないかのチェック if(tmp == fm.lb2.options[k].text) { flg = 1; break; } } if(flg == 0) { aditem[j] = fm.lb1.options[i].text; j++; } } } for(i=0; i < aditem.length; i++) { fm.lb2.length = lb2len + 1; fm.lb2.options[lb2len].text = aditem[i]; fm.lb2.options[lb2len].value = i; lb2len++; } } //lb2削除用 function del_lb2(fm) { var selnum = fm.lb2.selectedIndex var selv; var lb2len = fm.lb2.length; var narr = new Array(lb2len-1); var tmp; if(selnum == -1) alert("何も選択されていません。"); else { selv = fm.lb2.options[selnum].text; for(i=0, j=0; i < lb2len; i++) { tmp = fm.lb2.options[i].text; if(selv != tmp) { narr[j] = tmp; j++; } } fm.lb2.length = narr.length; for(i=0; i < narr.length; i++) { fm.lb2.options[i].text = narr[i]; fm.lb2.options[i].value = i; } } } </script> <form name="fm16"> <table border="0"> <tr><td width="150" bgcolor="rosybrown"><font color="white"><center>選択対象</font></center></td> <td width="150" bgcolor="rosybrown"><font color="white"><center>候補一覧</center></font></td> <td bgcolor="rosybrown"> </td> <td width="150" bgcolor="rosybrown"><font color="white"><center>選択</center></font></td></tr> <tr><td bgcolor="linen"> <center><select name="cb1" onChange="ch_lb1(this.form);"> <script language="JavaScript"></script> </select></center></td> <td bgcolor="linen"> <center><select name="lb1" size="6" multiple> <script language="JavaScript"></script> </select> <p></center></td> <td bgcolor="linen"><input type="button" name="bn2" value="追加　→" onClick="add_lb2(this.form);"><br><br><br> <input type="button" name="bn3" value="←　削除" onClick="del_lb2(this.form);"></td> <td bgcolor="linen"> <center><select name="lb2" size="6"> </select> </center></td> </tr> </table> <input type=submit value="送信"> </table> </form>

pon_yuta
お礼率72% (35/48)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

auty
ベストアンサー率58% (284/486)

2008/06/30 04:04 回答No.1

・　Hidden属性を使わなくても送信可能です。・　そのためには、送る前に、ｌｂ２の項目を全て選択します。 <select name="lb2" size="6" multiple="multiple"> <input type=submit value="送信" onclick="check(this.form);"> function check(fm) { for (i = 0; i < fm.lb2.length; i++) { fm.lb2.options[i].selected = true; } } ・　現在の致命的な点を１つ挙げると、 for (i = 0; i < aditem.length; i++) { fm.lb2.length = lb2len + 1; fm.lb2.options[lb2len].text = aditem[i]; fm.lb2.options[lb2len].value = aditem[i]; // not i lb2len++; } の部分です。追加されるときは1項目づつですから、iはつねに0となります。そこでたとえば、lb1のテキストを使ってみました。・　JSPで実際に試してみました。 [結果]　３つ追加したとき、　　　TEST_G2 lb2　 TEST_G1 　　　TESTUSER1 ・　以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head> <title></title> <script type="text/javascript">  </script> <body> <form name="fm16" action="queryMulti.jsp"> <table border="0"> <tr><td width="150" bgcolor="rosybrown"><center><font color="white">選択対象</font></center></td> <td width="150" bgcolor="rosybrown"><font color="white"><center>候補一覧</center></font></td> <td bgcolor="rosybrown"> </td> <td width="150" bgcolor="rosybrown"><font color="white"><center>選択</center></font></td> </tr> <tr> <td bgcolor="linen"> <center><select name="cb1" onChange="ch_lb1(this.form);"> <script language="JavaScript"></script> </select></center></td> <td bgcolor="linen"> <center><select name="lb1" size="6" multiple> <script language="JavaScript"></script> </select> <p></center></td> <td bgcolor="linen"><input type="button" name="bn2" value="追加　→" onClick="add_lb2(this.form);"><br><br><br> <input type="button" name="bn3" value="←　削除" onClick="del_lb2(this.form);"></td> <td bgcolor="linen"> <center><select name="lb2" size="6" multiple="multiple"> </select> </center></td> </tr> </table> <input type=submit value="送信" onclick="check(this.form);"> </form> </body> </html> ------------------------------------------------------------ queryMulti.jsp ------------------------------------------------------------ <%@ page contentType="text/html;charset=Windows-31J" import="java.util.*"%> <html> <head> <title>クエリ情報</title> </head> <body> <h1> クエリ情報一覧 "lb2" </h1> <table border="1"> <% String[] sels = request.getParameterValues("lb2"); out.println("<tr><th rowspan='" + sels.length + "'>" + "lb2" + "</th>"); for (int i = 0; i < sels.length; i++) { out.println("<td>" + sels[i] + "</td></tr>"); } %> </table> </body> </html>

質問者

お礼 2008/06/30 04:46

ご回答ありがとうございました。きっちり、目的が達成できました。助かりました。

関連するQ&A

リストボックスの内容追加と削除
質問QNo.172288を参考にプログラムを作成しました。そこで下記のような処理をしたいのですがどのように処理をしていいのか解りません。 Bというリストボックスの値を「追加」ボタンを押すとAのリストボックスに追加するときにBのリストボックスより選択した値は削除（非表示）あるいはAのリストボックスに既に存在する同じ値はAリストボックスには追加しない。（重複チェックみたいな感じです）それと、Aというリストボックスの値を「戻す」ボタンを押すと選択されている値をAのリストボックスより削除し、Bのリストボックスに表示させる JavaScriotでは難しいいですか。ご教授いただけないでしょうか宜しくお願いします <form name=frm method=post action=/beta/index.php> <td align=right> <select name=A size=8 multiple> <option value=""></option> </select> </td> <td align=center> <input type=button value="← 追加" onClick="addItem();"> <p> <input type=button value="戻す →" onClick="delItem();"> <td align=left> <select name=B size=8 multiple> <option>AAAAA</option> <option>BBBBB</option> <option>CCCCC</option> </select> </td> function addItem() { A = document.frm.A; B = document.frm.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 delItem() { B = document.frm.A; A = document.frm.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); } } }
- ベストアンサー
- JavaScript
リストボックスに追加した全ての値を取得したいのですが・・・
No.172288で質問したものですがまだJavaScriptを勉強しはじめたばかりでまた壁にぶつかってしまいました。 Bのリストボックスの値をAに追加して他のページにPOSTで送りたいのですが Aに追加された値をすべて送りたいのです。それで、まずすべての値をとれるかどうかを確認するためにSubmitボタンを押してすべてを表示させるものを作ってみたのですが、どうしても一番目（つまりiが0のAAAAA）しか表示できません。エラーも出ないのでどこが間違っているのかがわからないのですがどこが間違っているのでしょうか。何度もすみませんがよろしくおねがいします。 <html> <head> <title></title> </head> <script type="text/JavaScript">  </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>
- ベストアンサー
- JavaScript
Javascriptの動的リスト作成について
Javascriptの動的リスト作成についてお世話になっています。 Javascriptで選択リストを動的に変えたいと思っています。また、Javascriptで作成したリストは、multipleとして複数選択できるようにしたいと考えています。そこで、下記のようにスクリプトを書きました。リスト２(smallwheretag)が1つのみ選択を許すときは、うまくいったのですが、multipleにするためにnameを配列にしたところ、うまくリストが作成できなくなってしまいました。なにかスクリプトに変更が必要なのでしょうか？ご教授お願いいたします。 <HTML部> <select name="bigwheretag[]" onchange="javascript:listChange(this.value);"> <option value="">検索項目</option> <option value="11%">自然</option> <option value="12%">街</option> <option value="13%">家庭</option> </select> <select name="smallwheretag[]" multiple> <option value="">大項目を選択して下さい</option> </select> <Javascript部> var where1_text = new Array("川", "海", "山", "滝", "その他"); var where1_value = new Array("1101", "1102", "1103", "1104", "1199"); flag1 = document.form.bigwheretag.value; if (flag1=="11%") { document.form.smallwheretag.length = where1_text.length; for(var i=0; i<where1_text.length; i++) { document.form.smallwheretag.options[i].text = where1_text[i]; document.form.smallwheretag.options[i].value = where1_value[i]; } }・・・・・・・・以下同様
- ベストアンサー
- JavaScript
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>   </TABLE> </FORM> <FORM name="form2"> <INPUT type="button" onClick="getSelLen()" value=" selectの要素数 "> </FORM> </BODY> </HTML>
- ベストアンサー
- JavaScript
javascript
var sum = function(){ var result = 0; for(var i = 0; i < arguments.length; i++){ var tmp = arguments[i]; result += tmp; } return result; } document.writeln(sum(1, 3, 5, 7, 9)); このプログラムと function sum(){ var result = 0; for(var i = 0; i < arguments.length; i++){ var tmp = arguments[i]; result += tmp; } return result; } document.writeln(sum(1, 3, 5, 7, 9)); このプログラムでは実行結果は同じですが、どちらのほうが良いプログラムなのでしょうか？
- ベストアンサー
- その他（趣味・娯楽・エンターテイメント）
cookieでcheckbox項目の追加と削除とソート表示
http://www.din.or.jp/~hagi3/JavaScript/JSTips/Std/tbl.htm を参考に下記のようにcheckboxを付け加えました。 <script type="text/javascript"></script> </HEAD> <BODY> <FORM onsubmit="return false;"> <SELECT onchange="tblfilter('ex1',this.options[this.selectedIndex].value);"> <OPTION value="" selected>すべて</OPTION> <OPTION value=海>海の動物</OPTION> <OPTION value=陸>陸の動物</OPTION> <OPTION value=お気に入り>お気に入り</OPTION> </SELECT></FORM> <TABLE id=ex1> <TR title=海><TD><input type=checkbox value=1 title='追加'>1</TD><TD>いか</TD></TR> <TR title=陸,鳴く><TD><input type=checkbox value=2 title='追加'>2</TD><TD>いぬ</TD></TR> <TR title=海,鳴く><TD><input type=checkbox value=6 title='追加'>6</TD><TD>とど</TD></TR> </TABLE> </BODY></HTML> そして http://mugi.cc/js/030520.htm 上記のURLのようにcheckしたのをJavaScriptで保存し、最終的にはselectからお気に入りを選んだ際、 checkしたものだけ表示するようにしたいと考えております。お手数ですが、どなた様かご教授願いますようお願い致します。
- 締切済み
- JavaScript
リストボックス全選択について
JavaScriptについて質問です。リストボックスA,B　と　プルダウンC という画面項目があると仮定し、 submitボタンを押下したとき、リストボックスA,Bの項目全てが全選択され、プルダウン項目はそのままにしたいと考えております。下記のソースのように作成したのですが、リストボックスが全選択されるところまでは良いのですが、プルダウン項目が最後の項目が選択された状態になってしまいます。リストボックスだけが全選択され、プルダウン項目はそのままにするにはどうしたら良いでしょうか。かなり困ってます。どなたか助けてください。。以下ソースです。 <html> <head> <script language="JavaScript">  </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>
- 締切済み
- JavaScript
複数選択のリストボックスのvalueを表示
現在下記のようにしてリストボックスの値をフォームボタンに表示しています。複数選択のリストボックスに変更した場合の書き方のアドバイスをいただきたいのですが。 function Select( parts ){ var i,Msg; for (i = 0; i < parts.options.length; i++){ if ( parts.options[i].selected ){ Msg = parts.options[i].value + "さん宛送信"; } } document.main.Submit.value = Msg }
- ベストアンサー
- JavaScript
firefoxでjavascriptが…
現在、二つのセレクトボックス間でデータのやり取りをするjavascriptを製作しております。ieでは問題なく動作するのですが、firefoxだとセレクトボックスの移動ボタンを押すと余計なものまで消えてしまいます。どなたかご教授ください。 javascript↓ var master_selected_value; var master_selected_text; var user_selected_value; var user_selected_text; function select_master(a){ master_selected_text = a.master_list.options[a.master_list.selectedIndex].text; master_selected_value = a.master_list.options[a.master_list.selectedIndex].value; } function select_user(a){ user_selected_text = a.select_list.options[a.select_list.selectedIndex].text; user_selected_value = a.select_list.options[a.select_list.selectedIndex].value; } function portlet_move(a,b,c){ if( 1 == b ){ var sw = 0; for( n = 0 ; n < a.select_list.length ; n ++ ){ if( a.select_list.options[n].text == master_selected_text){ sw = 1; } } if( sw == 0 && master_selected_text != null ){ a.select_list.options[a.select_list.length] = new Option(master_selected_text,master_selected_value); } }else{ if( null != user_selected_text ){ for( n = a.select_list.selectedIndex ; n < a.select_list.length - 1; n ++ ){ a.select_list.options[n] = a.select_list.options[n + 1]; } a.select_list.length = a.select_list.length - 1; } user_selected_text = null; user_selected_value = null; } } function data_sum(a,b){ var buff = ""; for( n = 0 ; n < a.select_list.length ; n ++ ){ buff = buff + a.select_list.options[n].value; } a.select_list_data.value = buff; a.type.value = b; a.submit(); } function data_send(a,b){ var buff = ""; for( n = 0 ; n < a.select_list.length ; n ++ ){ buff = buff + a.select_list.options[n].value; } a.select_list_data.value = buff; a.type.value = b; a.send.value = "true"; a.submit(); } html↓ <form method="post" action="test.php" onsubmit="return moveItemSelect('ListBox1','ListBox2');"> <input type="hidden" name="type" value=""> <input type="hidden" name="select_list_data" value=""> <input type="hidden" name="send" value=""> <table> <tr> <td> <select name="type" onchange="data_sum(this.form,'recommended');"> <option value="a" selected="selected">a</option> <option value="b">b</option> </select> </td> <td></td> <td></td> </tr> <tr> <td> <select size="10" name="master_list" onchange="select_master(this.form);"> <option value="1">1</option> <option value="2">2</option> </select> </td> <td> <input type="button" class="button" value="→" onclick="portlet_move(this.form,1,2);"> <br /> <input type="button" class="button" value="←" onclick="portlet_move(this.form,2,1);"> </td> <td> <select size="10" name="select_list" onchange="select_user(this.form);"> <option value="1">1</option> </select> </td> </tr> <tr> <td colspan="3"><input type="button" class="button" value="登録" onclick="data_send(this.form,'recommended_write');" /></td> </tr> </table> </form>
- ベストアンサー
- JavaScript
チェックボックスがIE８で正しく動作しないのはなぜ
下記サンプルコードをIE８やIE７で試してみると、チェックボックスをクリックしてもその時点で動かず、ウインドウ上のどこかをクリックしないと動きません。 Firefox, Chrome, IE9ではチェックボックスをクリックした時点で動きます。どこに問題があるのでしょうか。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> </head> <body> <form> <ul id="t"> <li><input type="checkbox" name="t_0" onchange="fff()" value="0pt" /><label for="t_0">0pt</label></li> <li><input type="checkbox" name="t_1" onchange="fff()" value="10pt" /><label for="t_1">10pt</label></li> <li><input type="checkbox" name="t_2" onchange="fff()" value="20pt" /><label for="t_2">20pt</label></li> <li><input type="checkbox" name="t_3" onchange="fff()" value="30pt" /><label for="t_3">30pt</label></li> <li><input type="checkbox" name="t_4" onchange="fff()" value="40pt" /><label for="t_4">40pt</label></li> <li><input type="checkbox" name="t_5" onchange="fff()" value="50pt" /><label for="t_5">50pt</label></li> <li><input type="checkbox" name="t_6" onchange="fff()" value="60pt" /><label for="t_6">60pt</label></li> <li><input type="checkbox" name="t_7" onchange="fff()" value="70pt" /><label for="t_7">70pt</label></li> <li><input type="checkbox" name="t_8" onchange="fff()" value="80pt" /><label for="t_8">80pt</label></li> <li><input type="checkbox" name="t_9" onchange="fff()" value="90pt" /><label for="t_9">90pt</label></li> <li><input type="checkbox" name="t_10" onchange="fff()" value="100pt" /><label for="t_10">100pt</label></li> </ul> </form> <table> <tr> <td>サンプル1 ：</td><td>60pt</td> </tr> </table> <table> <tr> <td>サンプル2 ：</td><td>30pt</td> </tr> </table> <table> <tr> <td>サンプル3 ：</td><td>40pt</td> </tr> </table> <script type="text/javascript"> function fff() { var a = new Array; var b = document.getElementById('t').getElementsByTagName("input"); var c = document.getElementsByTagName('table'); for(i=0,len=b.length; i<len; i++){ if(b[i].checked == true){ a[i] = b[i].value; }else{ a[i] = ""; } } for(i=0,len=c.length; i<len; i++){ var d = c[i].getElementsByTagName('td'); var e = d[1].innerHTML; var if1 = a[0]==e || a[1]==e || a[2]==e || a[3]==e || a[4]==e || a[5]==e || a[6]==e || a[7]==e || a[8]==e || a[9]==e || a[10]==e; var if2 = a[0]=="" && a[1]=="" && a[2]=="" && a[3]=="" && a[4]=="" && a[5]=="" && a[6]=="" && a[7]=="" && a[8]=="" && a[9]=="" && a[10]==""; if(if1 || if2){ c[i].style.display = ''; }else{ c[i].style.display = 'none'; } } } </script> </body> </html>
- ベストアンサー
- JavaScript

JavaScriptでリストボックスに追加した値を渡す方法

JavaScriptでリストボックスに追加した値を渡したい

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

お礼 2008/06/30 04:46

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

JavaScriptでリストボックスに追加した値を渡す方法

JavaScriptでリストボックスに追加した値を渡したい

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

お礼 2008/06/30 04:46

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

カテゴリ
一覧

専門家に質問してみよう
専門家登録