「blog2009/2009年04月21日/HTML+JavaScriptでコンボボックスを作る」の編集履歴(バックアップ)一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
#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{
カテゴリ: [[[Program>blog2009/カテゴリ/Program]]] - &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{
カテゴリ: [[[Program>blog2009/カテゴリ/Program]]] - &trackback() - 2009年04月21日 21:38:44
}
- あああ -- あああ (2012-08-28 09:59:42)
#comment(nostyle,nsize8,size30)
#blognavi