- ベストアンサー
JavaScriptによるSelect項目追加
- JavaScriptを使用して新しいSelect項目を追加する方法についてお聞きしたいです。
- 配布されているサンプルソースを使用して、JavaScriptでSelect項目を追加するフォームを作成中です。
- 追加した項目が一番先頭に来て選択状態にする方法がわからないので、ご教示いただけると助かります。
- ham64600
- お礼率72% (27/37)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 サンプルサイトとはちょっと作り方が違いますが、こちらのほうが簡単に実装できると思います。 ==== 動作サンプル 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> <!-- q7537872 -->
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
こんな感じで <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>
お礼
早速のご回答、誠にありがとうございます。 お陰様で思ったような制御ができました。本当にありがとうございました。
お礼
分かりやすく動作サンプルまでご教示いただきまして誠にありがとうございました。 サンプルとは違いますが、シンプルなコードで 思うような動作が得られました。 本当にありがとうございました。感謝申し上げます。