- ベストアンサー
JavaScriptでセレクトボックスを作成する方法
- JavaScriptを使用して、枠線や右側の▽のないセレクトボックスを作成する方法を探しています。
- HTMLタグのselectを弄る方法では実現できないため、ドロップダウンメニューを改造する方法を検討しています。
- 現在、オンマウスで表示を切り替えることはできますが、sub1をクリックした際にmainと入れ替える処理の実装方法について分かりません。対応させたいブラウザはFirefoxとGoogle Chromeです。
- Reghorn
- お礼率86% (40/46)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
私なら mainを<a>ではなく <input>で作成するわ そうすれば置き換えは簡単でしょう？ 画面からの送信にも対応できるし。 そうでないなら<a>にidかnameをふって innerTextの置き換えをするくらいかしら。
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
＞これのsub1をクリックした際にmainと入れ替わる、といった処理を ＞どのようにすればよいのかが分かりません 入替えると順序が変わってしまうので、使いやすいのか使いにくいのか疑問ですが・・・ それは置いておいて、全体が別発想ですが原理的なサンプルを。 * HTMLをリストに変えています。リストの最初の項目が選択中のという位置付け。 * ホバーは基本的にCSSで処理し、クリックの処理のみスクリプトで行なっています。 （スクリプトの処理は単純にリストの順序を入替えているだけです。） * class="dropdown"を設定してある、要素が対象になります。 （手元にChromeがないので、Fx6.0でしか確認をしてません。ＩＥでは動かないでしょう。） （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- .dropdown { width:8em; height:1.1em; overflow:hidden; } .dropdown ul, .dropdown li { list-style-type:none; margin:0; padding:0; } .dropdown li:first-child { font-weight:bold; background-color:#fff; } .dropdown:hover ul { position:absolute; width:inherit; background-color:#eef; } .dropdown:hover li:hover { background-color:#cce; } //--> </style> <script type="text/javascript"> <!-- document.addEventListener("click", function(evt){ var node = evt.target; if(node.nodeName != "LI") return; var ul = node.parentNode, p = ul.parentNode; while(p && !/(^| )dropdown( |$)/.test(p.className)) p = p.parentNode; if(!p) return; ul.insertBefore(ul.getElementsByTagName("li")[0], node); ul.insertBefore(node, ul.firstChild); }, false); //--> </script> </head> <body> <div class="dropdown"> <ul> <li>main</li> <li>sub1</li> <li>sub2</li> <li>sub3</li> <li>sub4</li> </ul> </div> </body> </html>
お礼
回答ありがとうございます。 私にはない発想で、とても参考になりました。
お礼
回答有難う御座います。 inputを使うとレイアウトが崩れてしまうので、後者の方法のinnerTextをtextContentに置き換えて実装しました。