blog2009 > 2009年04月21日 > HTML+JavaScriptでコンボボックスを作る

「blog2009/2009年04月21日/HTML+JavaScriptでコンボボックスを作る」の編集履歴(バックアップ)一覧はこちら

blog2009/2009年04月21日/HTML+JavaScriptでコンボボックスを作る」(2012/08/28 (火) 09:59:42) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

#blognavi HTMLフォームにはコンボボックスが存在しない。 Ajaxを使わない条件では、JavaScriptで擬似的に実現したものが見つかったが良いものがなかった。 そこで、JavaScriptでテキストボックス、ボタン、リストボックスを連携させて擬似的にコンボボックスの操作感を実現してみた。 動作確認はIE6のみなのであしからず。 <HTML> <HEAD> <TITLE>擬似コンボボックス</TITLE> <STYLE type="text/css"> .ComboButton { font-size : 9px; position : relative; left : -2px; top : -1px; width : 17px; height : 20px; } .ComboList { position : relative; left : -2px; top : -2px; visibility : hidden; } </STYLE> <SCRIPT Language="JavaScript"> function ShowList(Num) { var ListBox = document.getElementById("List_" + Num); ListBox.selectedIndex = -1; ListBox.size = ListBox.length; ListBox.style.visibility = "visible"; // いきなりfocusするとonBlurが変に発生するので10ミリ秒後にfocusする。 setTimeout("document.Form1.List_" + Num + ".focus()", 10); } function HideList(Num) { ListBox = document.getElementById("List_" + Num); ListBox.style.visibility = "hidden"; ListBox.size = 1; } function Selected(Num) { TextBox = document.getElementById("Text_" + Num); ListBox = document.getElementById("List_" + Num); // TextBoxをfocusする。ListBoxにonBlurイベントが発生しHideListが呼ばれる TextBox.focus(); var index = ListBox.selectedIndex; TextBox.value = ListBox.options[index].value; } </SCRIPT> </HEAD> <BODY> <FORM name="Form1"> <INPUT type="text" name="Text_1" style="width:80"><!-- ※本コメントブロックはatwiki表示調整用 --><INPUT type="button" class="ComboButton" value="▼" onClick="ShowList(1)"><BR> <SELECT name="List_1" class="ComboList" style="width:100" onChange="Selected(1)" onBlur="HideList(1)"> <option value="Item 1">Item 1</option> <option value="Item 2">Item 2</option> <option value="Item 3">Item 3</option> <option value="Item 4">Item 4</option> <option value="Item 5">Item 5</option> </SELECT> </FORM> </BODY> </HTML> #right{ カテゴリ: &#x5b;[[Program>blog2009/カテゴリ/Program]]&#x5d; - &trackback() - 2009年04月21日 21:38:44 } #comment(nostyle,nsize8,size30) #blognavi
#blognavi HTMLフォームにはコンボボックスが存在しない。 Ajaxを使わない条件では、JavaScriptで擬似的に実現したものが見つかったが良いものがなかった。 そこで、JavaScriptでテキストボックス、ボタン、リストボックスを連携させて擬似的にコンボボックスの操作感を実現してみた。 動作確認はIE6のみなのであしからず。 <HTML> <HEAD> <TITLE>擬似コンボボックス</TITLE> <STYLE type="text/css"> .ComboButton { font-size : 9px; position : relative; left : -2px; top : -1px; width : 17px; height : 20px; } .ComboList { position : relative; left : -2px; top : -2px; visibility : hidden; } </STYLE> <SCRIPT Language="JavaScript"> function ShowList(Num) { var ListBox = document.getElementById("List_" + Num); ListBox.selectedIndex = -1; ListBox.size = ListBox.length; ListBox.style.visibility = "visible"; // いきなりfocusするとonBlurが変に発生するので10ミリ秒後にfocusする。 setTimeout("document.Form1.List_" + Num + ".focus()", 10); } function HideList(Num) { ListBox = document.getElementById("List_" + Num); ListBox.style.visibility = "hidden"; ListBox.size = 1; } function Selected(Num) { TextBox = document.getElementById("Text_" + Num); ListBox = document.getElementById("List_" + Num); // TextBoxをfocusする。ListBoxにonBlurイベントが発生しHideListが呼ばれる TextBox.focus(); var index = ListBox.selectedIndex; TextBox.value = ListBox.options[index].value; } </SCRIPT> </HEAD> <BODY> <FORM name="Form1"> <INPUT type="text" name="Text_1" style="width:80"><!-- ※本コメントブロックはatwiki表示調整用 --><INPUT type="button" class="ComboButton" value="▼" onClick="ShowList(1)"><BR> <SELECT name="List_1" class="ComboList" style="width:100" onChange="Selected(1)" onBlur="HideList(1)"> <option value="Item 1">Item 1</option> <option value="Item 2">Item 2</option> <option value="Item 3">Item 3</option> <option value="Item 4">Item 4</option> <option value="Item 5">Item 5</option> </SELECT> </FORM> </BODY> </HTML> #right{ カテゴリ: &#x5b;[[Program>blog2009/カテゴリ/Program]]&#x5d; - &trackback() - 2009年04月21日 21:38:44 } - あああ -- あああ (2012-08-28 09:59:42) #comment(nostyle,nsize8,size30) #blognavi

表示オプション

横に並べて表示:
変化行の前後のみ表示:
ツールボックス

下から選んでください:

新しいページを作成する
ヘルプ / FAQ もご覧ください。