重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

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

解決済

  • 質問者：osaka-aq
  • 質問日時：
  • 回答数：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で出来そうな気がするのですが、お詳しい方、是非ともお力添え下さい。
宜しくお願い致します。

通報する

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

質問の本文を隠す

A 回答 (4件)

No.1ベストアンサー

  • 回答者： Hardking
  • 回答日時：

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";
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

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

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

通報する
お礼日時：2010/04/06 18:24

No.4

  • 回答者： pick52
  • 回答日時：

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


できないようです。

http://www.glamenv-septzen.net/index.php?id=437_2
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

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

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

通報する
お礼日時：2010/04/06 18:21

No.3

  • 回答者： yyr446
  • 回答日時：

続きです。


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>

参考URL：http://msdn.microsoft.com/ja-jp/library/cc364423 …
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

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

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

通報する
お礼日時：2010/04/06 18:21

No.2

  • 回答者： yyr446
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

サンプルを掲載頂き、感謝ですm(__)m
皆様のおかげで無理とわかっただけでも助かりました！

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

通報する
お礼日時：2010/04/06 18:23

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報