Selectボックスの一覧表示方法

解決済

質問者：osaka-aq
質問日時：2010/03/31 13:06
回答数：4件

Selectボックスの一覧表示方法

いつもお世話になりますm(__)m

<input type='text' name='hoge1'>
<select name='hoge2'>
<option value='1'>Aあああ</option>
<option value='2'>Bいいい</option>
<option value='3'>Cううう</option>
</select>

上記のフォームがあった場合、hoge1を入力して、TABキーでhoge2のSelectボックスにフォーカスが移動した時、hoge2の一覧を表示させたいのですが、可能でしょうか？
hoge2にフォーカスがある時に、キーボードのALT+↓を押した時と同じ動作を自動でしたいと思っています。
※Accessでいうところの、xx.Dropdownと同じです

いろいろ調べたところ、「onfocus="this.size=5"」でSelectボックス自体のサイズを変更して表示する方法は見つかりました。
しかし、上記のようにSelectボックス自体のサイズを変更せず、まさにALT+↓を押した状態(一覧が表示される状態)にしたいと考えています。

javascriptのonfocusで出来そうな気がするのですが、お詳しい方、是非ともお力添え下さい。
宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： Hardking
回答日時：2010/03/31 16:31

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";

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございますm(__)m

なるほど～そういうやり方もあるんですね！
サンプルを掲載頂き、感謝ですm(__)m
少し試してみます！

ありがとうございましたm(__)m
また何かの際には宜しくお願い致します。

通報する

お礼日時：2010/04/06 18:24

No.4

回答者： pick52
回答日時：2010/04/01 15:21

いろいろとテスト(clickとか)したり調べてみましたが、どうやら

できないようです。

http://www.glamenv-septzen.net/index.php?id=437_2

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございますm(__)m

やはり無理なんですかぁ(>_<)

ありがとうございましたm(__)m
また何かの際には宜しくお願い致します。

通報する

お礼日時：2010/04/06 18:21

No.3

回答者： yyr446
回答日時：2010/04/01 10:48

続きです。

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">

</script>
</body>

参考URL：http://msdn.microsoft.com/ja-jp/library/cc364423 …

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございますm(__)m

サンプルまでお書き頂き、ありがとうございます！
ただ、やはりIE限定とかになっちゃうんですね(^-^;)

ありがとうございましたm(__)m
また何かの際には宜しくお願い致します。

通報する

お礼日時：2010/04/06 18:21

No.2

回答者： yyr446
回答日時：2010/03/31 20:30

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">

</script>
</body>