#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>
カテゴリ: [
Program] - &trackback() - 2009年04月21日 21:38:44
- あああ -- あああ (2012-08-28 09:59:42)
#blognavi
最終更新：2012年08月28日 09:59
