Javascriptの動的リスト作成について

2023/08/16 03:54

このQ&Aのポイント

Javascriptで選択リストを動的に変えたいと思っています。Javascriptで作成したリストは、multipleとして複数選択できるようにしたいと考えています。なにかスクリプトに変更が必要なのでしょうか？
Javascriptで選択リストを動的に変える方法について教えてください。複数選択可能なリストを作成するにはどうすればよいですか？
Javascriptを使用して動的に選択リストを作成しようとしていますが、multiple属性を追加した後、リストがうまく作成されません。どのような変更が必要ですか？

ベストアンサー

Javascriptの動的リスト作成について

2012/06/04 14:12

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]; } }・・・・・・・・以下同様

islet_floodgate
お礼率0% (0/1)

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

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

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

ベストアンサー

yambejp
ベストアンサー率51% (3827/7415)

2012/06/04 15:11 回答No.1

form.elements["bigwheretag[]"]

関連するQ&A

リストボックスに追加した全ての値を取得したいのですが・・・
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でセレクトメニューのフォームをチェックしたいのですが、リストメニューの「選択して下さい」を選んだままだと、「番号を選択して下さい。」とエラーを出したいのですが、下記の様に書いてみたのですが、うまく動きません…どのように書けばいいか教えて下さい。宜しくお願いします。 <script language=＼"JavaScript＼">  </script> <form id="form" name="form" method="post" action="##"> <select name="a" onblur="Check();"> <option value="0">選択して下さい</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input type="submit" name="Submit" value="登録" onClick="Check();"> </form>
- ベストアンサー
- JavaScript
web上のリストボックス作成
あるHTMLで、リストボックスをDREAMWEAVERでさくせいしました。リストを選択すると、選択された名前のHTMLに飛ぶように指定したのですが、ネスケでは動いてくれるのですが、IEでは飛んでくれません. 原因を教えてください。以下のようなHTMLです。このためのCGIはくんでいません。 <form name="form2"> <select name="month"onChange="MM_jumpMenu('parent',this,0)"size="0"multiple> <option value="1.html">　１　</option> <option value="2.html">　２　</option> <option value="3.html">　３　</option> <option value="4.html">　４　</option> <option value="5.html">　５　</option> </select> </form>
- ベストアンサー
- HTML
リストボックスの内容追加と削除
質問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
FORMデータを配列としてそうしんしたいのですが・・・
JavaScriptでセレクトボックス内の値が変化したらもう一つあるセレクトリスト内の値が変更されるように組みました。以下コード。 ----------------------- <HTML> <head> <script type="text/JavaScript">  </script> </head> <body> <FORM name = "myForm"> <SELECT name="list" onChange="setMenuItem(this.selectedIndex)"> <option value="list1">リスト１ <option value="list2">リスト２ <option value="list3">リスト３ </SELECT> <SELECT name="works[]" MULTIPLE> <OPTION>A <OPTION>B <OPTION>C <OPTION>D <OPTION>E </SELECT> </FORM> </BODY> </HTML> ----------------------- でセレクトリスト内のデータを配列として送信したいのですがうまくいきません。セレクトリストのnameはworks[]にしたら動作すらしなくなりました。どなたかご教授願います。
- ベストアンサー
- JavaScript
javascriptのDOMについてなんですが・・・
閲覧有難うございます。 JavaScriptのDOMを用いてテキストボックスを生成しようと考えているのですがうまくいきません。 <form name="form" action="index2.php"> <select id="factor" onchange="swicthForm()"> <option value="0">選んでください</option> <option value="1">1個</option> <option value="2">2個</option> <option value="3">3個</option> <option value="4">4個</option> <option value="5">5個</option> </select> </form> <br> <script type="text/javascript"> function swicthForm(){ var options = document.form.factor.value; alert(options); } } </script> を用いてSELECTでいくらを選んだかが表示することが出来ました。 alert(options)の値の分だけテキストボックスなり何なりを生成したいのですがうまくいきません。どの様にしたらテキストボックスなどを表示できますか？
- 締切済み
- 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
リストボックスを連動させて・・・その２
直前の質問で下記の回答をいただいたものです。質問では２つのリストボックスを連動させたサンプルの回答をいただきましたが、ひょっとして、リストボックスの個数が何個でも対応させることはできないでしょうか。つまり、リストボックスのnameなどをscript部分に記さずに・・。ここまでサンプルをもらっても改造できないので質問。 (^^; ■JavaScript <SCRIPT language=JavaScript>  </SCRIPT> ■フォーム <FORM NAME="form"> <select name="s1" onChange="set()"> <OPTION VALUE="" SELECTED>↓【選択して下さい】</OPTION> <OPTION VALUE="big">big</OPTION> <OPTION VALUE="small">small</OPTION> </SELECT> <select name="s2" onChange="set()"> <OPTION VALUE="" SELECTED>↓【選択して下さい】</OPTION> <OPTION VALUE="red">red</OPTION> <OPTION VALUE="white">white</OPTION> </SELECT> <INPUT TYPE="text" SIZE=50 NAME="text"> </FORM>
- ベストアンサー
- JavaScript
JavaScriptでリストボックスに追加した値を渡したい
リストボックスが２つあり、一方には候補一覧があり、追加ボタンでもう一方に選択項目を追加していくようなフォームを作りました。で、選択項目を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>
- ベストアンサー
- JavaScript
ネスケで動かないjavascriptの調べ方
下記はセレクトボックスを選択させるためのものですが、ＩＥでは動きますが、ＮＮでは動きません。この時に、何かで調べようとするときに、「何」を調べればいいのかさっぱりです。できれば、１番目に○を調べ、２番目に○を調べ、というような手順についてアドバイスいただけないでしょうか。 <SCRIPT language=JavaScript> function submitCheck(){ for( i=0 ; i<document.main.length ; i++ ){ if(document.main.elements[i].type == "select-one" && document.main.elements[i].value == "err"){ alert("未選択項目があります。"); document.main.elements[i].focus(); return false; } } } </SCRIPT> <FORM NAME=main ACTION="sample.cgi" METHOD="POST" ENCTYPE="application/x-www-form-urlencoded" onSubmit="return submitCheck()"> <SELECT NAME="kubun"><OPTION SELECTED value="err">↓【選択して下さい】</OPTION> <OPTION>りんご</OPTION> <OPTION>みかん</OPTION> </SELECT> <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="送信"></form>
- ベストアンサー
- JavaScript