- ベストアンサー
JavaScriptでリストボックスに追加した値を渡す方法
- JavaScriptを使用して作成したフォームで、リストボックスに追加した選択項目をサーバに渡す方法を教えてください。
- リストボックスが2つあり、一方には候補一覧があり、もう一方には選択項目を追加していくかたちのフォームを作成しました。選択項目をサーバに渡すための具体的な方法を知りたいです。
- Hidden項目に選択した値をセットする方法があることは分かりましたが、具体的な手順が分からないので、詳しく教えてください。
- pon_yuta
- お礼率72% (35/48)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （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"> <!-- cbnum = 2; cbdata = new Array(cbnum); cbdata[0] = "\u30b0\u30eb\u30fc\u30d7"; cbdata[1] = "\u30e1\u30f3\u30d0\u30fc"; 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"; 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 = aditem[i]; // not i lb2len++; } } 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("\u4f55\u3082\u9078\u629e\u3055\u308c\u3066\u3044\u307e\u305b\u3093\u3002"); } 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; } } } function check(fm) { for (i = 0; i < fm.lb2.length; i++) { fm.lb2.options[i].selected = true; } for (i = 0; i < fm.lb2.length; i++) { alert(fm.lb2.options[i].selected); } } //--> </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"><!-- for(i=0; i<cbnum; i++) { if(i == 0) document.write ('<option value="' + i + '" selected>' + cbdata[i]); else document.write ('<option value="' + i + '">' + cbdata[i]); } // --></script> </select></center></td> <td bgcolor="linen"> <center><select name="lb1" size="6" multiple> <script language="JavaScript"><!-- for(i=0; i<lbnum1; i++) { if(lbnum1 > i) document.write ('<option value="' + i + '">' + lbdata1[i]); else document.write ('<option value="' + i + '">'); } // --></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>
お礼
ご回答ありがとうございました。 きっちり、目的が達成できました。 助かりました。