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


※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

#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
ツールボックス

下から選んでください:

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