JavaScriptによるSelect項目追加

2012/06/17 02:11

このQ&Aのポイント

JavaScriptを使用して新しいSelect項目を追加する方法についてお聞きしたいです。
配布されているサンプルソースを使用して、JavaScriptでSelect項目を追加するフォームを作成中です。
追加した項目が一番先頭に来て選択状態にする方法がわからないので、ご教示いただけると助かります。

ham64600
お礼率72% (27/37)

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

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

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

ベストアンサー

LancerVII
ベストアンサー率51% (1060/2054)

2012/06/17 09:25 回答No.1

こんにちは。サンプルサイトとはちょっと作り方が違いますが、こちらのほうが簡単に実装できると思います。 ==== 動作サンプル http://hppg.moe.hm/okwave/qa/q7537872/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>【OKWave回答サンプル集】JavaScriptによるSelect項目追加</title> <link rel="stylesheet" href="/okwave/qa/css/basic.css" type="text/css" /> <script type="text/javascript"> function add ( formObj ) { var newOpt = document.createElement('option'); newOpt.value = formObj.val.value; newOpt.text = formObj.txt.value; var optObj = document.getElementsByName('sel')[0]; optObj.add ( newOpt, 0 ); optObj.selectedIndex = 0; } </script> <style type="text/css"> </style> </head> <body> <h1>JavaScriptによるSelect項目追加(q7537872)</h1> <h2>サンプル</h2> <form id="id-form"> <select name="sel" size="10" multiple="multiple"> <option value="1">項目１</option> <option value="2">項目２</option> <option value="3">項目３</option> <option value="4">項目４</option> </select> Value:<input type="text" name="val" />Text:<input type="text" name="txt" /><input type="button" value="追加" onclick="add(this.form);" /> </form> </body> </html>

質問者

お礼 2012/06/17 17:21

分かりやすく動作サンプルまでご教示いただきまして誠にありがとうございました。サンプルとは違いますが、シンプルなコードで思うような動作が得られました。本当にありがとうございました。感謝申し上げます。

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

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

2012/06/17 09:33 回答No.2

こんな感じで <script> function _add3(f,sid){ var s=document.getElementById(sid); var o=s.options[0]; var t=f.elements["TextStr"].value; var v=f.elements["ValueStr"].value; var n=document.createElement("option"); n.appendChild(document.createTextNode(t)); n.setAttribute("value",v); s.insertBefore(n,o); s.selectedIndex=0; } </script> <form name="selectform"> <select name="LinkList" size="5" cols="30" id="LinkList" multiple> <option value="valueその１">こうもくその１ <option value="valueその２">こうもくその２ <option value="valueその３">こうもくその３ </form> <form name="addform"> こうもくめい：<input type="text" name="TextStr" value="こうもく0" size="10"> ばりう：<input type="text" name="ValueStr" value="val0" size="10"> <input type="button" value="追加てすと用ボタン" onClick='_add3(this.form,"LinkList")'> </form>

質問者