- ベストアンサー
insertBefore()で任意の場所にobjectを表示
- selectで選択した会社の製品リストを非同期に取得し、希望の場所に表示する方法
- JavaScriptのajaxを使用してデータを取得し、選択した会社の製品リストを作成
- insertBefore()メソッドを使用して希望の場所に製品リストを表示するが、エラーが発生している
- lovehiroko
- お礼率90% (20/22)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 getDataからmkSlelectにoFormを渡すのを忘れてました。 以下でテストしました。（一部簡略化、変更してます。） <html> <head> <script type="text/javascript"> function getData(Select) { var products = ['google','yahoo','goo'];//ajaxでの取得代わり mkSelect(products,Select); } function mkSelect(products,targetSelect) { var select = document.createElement("select"); for(i=0; i<products.length; i++){ var option = document.createElement("option"); option.value = products[i]; var text = document.createTextNode(products[i]); option.appendChild(text); select.appendChild(option); } var nextEl = targetSelect.nextSibling; targetSelect.form.insertBefore(select,nextEl); } </script> </head> <body> <form> <select name="dvlname" id="dvlname" onchange="getData(this);return false;"> <option value="JustSystems">JustSystems</option> <option value="Microsoft">Microsoft</option> <option value="Miracle Linux">Miracle Linux</option> </select> <input type="submit" value="ダミーボタン"><!--挿入位置確認用--> </form> </body> </html>
その他の回答 (2)
- steel_gray
- ベストアンサー率66% (1052/1578)
2回目以降は追加でなくて書き換えにする方法。 var nextEl = targetSelect.nextSibling; targetSelect.form.insertBefore(select,nextEl); こちらの処理をする時、一度実行された後はnextElは前回追加したselectになっています。 なので、nextElがselectだったらinsertBeforeの代わりにreplaceChildを使います。 if(nextEl.nodeType==1 && nextEl.tagName == 'SELECT') { targetSelect.form.replaceChild(select,nextEl); }else{ targetSelect.form.insertBefore(select,nextEl); } 他にもやりようはいろいろあるけど、パっと思いついた方法です。
お礼
すばらしいです。 完全解決いたしました。どうもありがとうございます。 とても助かりました。
- steel_gray
- ベストアンサー率66% (1052/1578)
insertBeforeは追加したい親ノードのメソッドとして働きます。 なので、getDataを呼ぶ時に親フォームを追加で渡す onchange="getData(this.options[this.selectedIndex].value,'dvlname',this.form); getDataで親フォームを受取る function getData(vender,id,oForm) { inserBeforeを使う oForm.insertBefore(select,nextEl); で、大丈夫・・・かも。 この件と関係ないけど var name = document.createElement("name"); name.value = "product"; って、 select.name（又はid） = "product"; の間違い？？
お礼
回答ありがとうございます。 試してみましたが、まったく同じエラーとなりました。 色々ググッて試してみたのですが、なぜかどれもだめでした。 申し訳ありません。
お礼
丁寧にありがとうございます。 解決いたしました。onchangeイベントで渡すオブジェクトが間違っていたようです。 実際のところjavascriptについてまだ理解ができたわけではありませんが、当面やりたいことが実現できたので今後経験を積みながら理解できればと思います。 もうひとつ、よろしければ教えていただきたいのですが、現状だと最初のselectイベントを複数回繰り返すとオブジェクトが追加されていきますが、これを置き換えるようにするにはどうしたらよいのでしょうか？ もしかしたらこれは別スレッドを立てたほうがよいのでしょうか？ よろしくお願いいたします。