- ベストアンサー
Selectボックスの一覧表示方法
- Selectボックスの一覧表示方法について、ALT+↓を押した状態と同じ動作を自動で行いたい。
- Selectボックス自体のサイズを変更せずに、一覧が表示された状態にする方法を探しています。
- Javascriptのonfocusを使用して実現できるかどうか、詳しい方の助言をお願いします。
- osaka-aq
- お礼率64% (41/64)
- JavaScript
- 回答数4
- ありがとう数24
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
JavaScriptとActiveXコントロールの連携などで実装可能と思いますが 擬似的なリスト表示で構わないのであれば ＤＨＴＭＬとＣＳＳを使って擬似的にフォーカス取得時に ドロップダウンリストを表示する方法はどうでしょうか。 <body onLoad="XXXX"> <input type='text' name='hoge1'> <select name='hoge2'> <option value='1'>Aあああ</option> <option value='2'>Bいいい</option> <option value='3'>Cううう</option> </select> <DIV id="myList"><DIV> </body> ◆ページonLoad時 （DIVタグ非表示） document.getElementById("myList").style.visibility = "hidden"; ◆Selectボックスのonfocus時 （DIVタグ表示） var obj document.getElementById("myList"); obj.style.color = '#000000'; //文字色黒 obj.style.fontSize ='12'; obj.style.backgroundColor ='#ffffff'; obj.style.borderTopColor ='#000000'; obj.style.borderBottomColor ='#000000'; obj.style.borderLeftColor ='#000000'; obj.style.borderRightColor ='#000000'; obj.style.left = 10; obj.style.top = 10; obj.style.width = '498px'; obj.style.height = '23px'; //リスト部編集 obj.innerHTML = "Aあああ<BR>Bいいい<BR>Cううう"; obj.style.visibility = "visible"; ◆Selectボックスのその他イベント時 （DIVタグ非表示） document.getElementById("myList").style.visibility = "hidden";
その他の回答 (3)
- pick52
- ベストアンサー率35% (166/466)
いろいろとテスト(clickとか)したり調べてみましたが、どうやら できないようです。 http://www.glamenv-septzen.net/index.php?id=437_2
お礼
ご回答ありがとうございますm(__)m やはり無理なんですかぁ(>_<) ありがとうございましたm(__)m また何かの際には宜しくお願い致します。
- yyr446
- ベストアンサー率65% (870/1330)
続きです。 Windows/IE だけでよいなら、ActiveXのWscriptSkell利用で簡単に出来ました。（ユーザーがActiveXの使用を有効に設定してくれなきゃだめですが） (例) <body> <input type='text' name='hoge1' id="hoge1"> <select name='hoge2' id="hoge2" onclick="alert('click')"> <option value='1'>Aあああ</option> <option value='2'>Bいいい</option> <option value='3'>Cううう</option> </select> <script type="text/javascript" charset="utf-8"> <!-- var wsh = new ActiveXObject("WScript.Shell"); var target=document.getElementById("hoge2"); document.getElementById("hoge1").onkeydown=function(){ var eve=window.event; var key=eve.keyCode; if(key==9){ eve.returnValue = false; target.focus(); wsh.SendKeys ("%{DOWN}"); } } // --> </script> </body>
お礼
ご回答ありがとうございますm(__)m サンプルまでお書き頂き、ありがとうございます！ ただ、やはりIE限定とかになっちゃうんですね(^-^;) ありがとうございましたm(__)m また何かの際には宜しくお願い致します。
- yyr446
- ベストアンサー率65% (870/1330)
Selectボックスをクリックすると、キーボードのALT+↓を押した時と 同じように一覧表示になりますよねえ、ところがDOMのイベントで、 クリックを発生させても、一覧表示になりません。keydownでもkeypress でもDOMのイベントからは制御不能みたいです。 （Windows/IEだけならActiveXで出来るのかもしれませんが、調べてません） ちなみにキーコードは Tab(9)、Alt(18)、←(37)、↑(38)、→(39)、↓(40) で、DOMでコードを拾ったり、イベント生成できるので、 いろいろやってみましたが、全部×でした。 下のサンプルで、hoge1でタブキー押したら、hoge2に focusしてクリックイベントが発生します。イベントが発生しているのは アラートで確認できるのですが、一覧表示にはなりません。 クリックイベントの他、 var ee=document.createEvent("KeyboardEvent"); ee.initKeyEvent("keydown",true,true,null,false,false,false,false,40,0) target.dispatchEvent(ee); とか、いろいろ試したけど全部×でした。 （テストしたサンプル） <body> <input type='text' name='hoge1' id="hoge1"> <select name='hoge2' id="hoge2" onclick="alert('click')"> <option value='1'>Aあああ</option> <option value='2'>Bいいい</option> <option value='3'>Cううう</option> </select> <script type="text/javascript" charset="utf-8"> <!-- var target=document.getElementById("hoge2"); document.getElementById("hoge1").onkeydown=function(e){ var eve=e?e:window.event; var key=eve.keyCode; if(key==9){ try{ eve.preventDefault(); }catch(e){ eve.returnValue = false; } target.focus(); try{ var ee = document.createEvent("HTMLEvents"); ee.initEvent("click",true,false); target.dispatchEvent(ee); }catch(e){ target.click(); } } } // --> </script> </body>
お礼
ご回答ありがとうございますm(__)m サンプルを掲載頂き、感謝ですm(__)m 皆様のおかげで無理とわかっただけでも助かりました！ ありがとうございましたm(__)m また何かの際には宜しくお願い致します。
お礼
ご回答ありがとうございますm(__)m なるほど～そういうやり方もあるんですね！ サンプルを掲載頂き、感謝ですm(__)m 少し試してみます！ ありがとうございましたm(__)m また何かの際には宜しくお願い致します。