コンボボックスを JavaScript で作る。　寝太郎の江戸風呂。ね！

2024
04
25

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/04/25 (Thu.)

2010
11
10

コンボボックスを JavaScript で作る。

コンボボックスは、インプットボックスとリストボックスを組み合わせた入力ボックスです。リストから値を選択することも、直接、値を入力することもできます。今回紹介する neta.elements.ComboBox では、INPUT 要素と UL 要素を組み合わせています。

ComboBox コンストラクタの書式

combox=new neta.elements.ComboBox(container)

引数は、コンボボックスを配置する先の HTML 要素です。実際に配置するには draw メソッドを実行します。

DIV要素を生成して、その中に INPUT 要素、BUTTON 要素、UL 要素を子要素として配置します。ボタンを押すと、リストボックスが現れます。UL要素内のリストは、draw メソッドで指定します。

draw メソッドの書式

combox.draw(list)

draw メソッドの引数

draw メソッドの引数は、配列です。

['A', 'B', 'C']

記述例

neta.addListener(function(){
 var container=document.getElementById('container');
 var combox=new neta.elements.ComboBox(container);
 combox.draw(['A','B','C']);
 var container2=document.getElementById('container2');
 var combox2=new neta.elements.ComboBox(container2);
 combox2.draw(['E','F','G']);
});

実行例

ソースコード

if(!window['neta'])window['neta']={};
if(!window['neta']['elements'])window['neta']['elements']={};
(function(){
 var a=neta.elements;
 a.ComboBox=function(container){
  this.container=container||document.body;
  this.element=a.element('div',{style:{position:'relative'}});
  var self=this;
  self.ul =a.element('ul',{style:{
    display:'none',
    position:'absolute',
    top:'15',
    zIndex:10,
    backgroundColor:'#ccc',
    boder:'solid 1px #999'
  }});
  var copy=function(){
   self.inp.value=this.innerHTML;
   hide();
  }
  var show=function(){
    self.ul.style.display='block';
  }
  var hide=function(){
    self.ul.style.display='none';
  }
  self.inp=a.element('input',{
   type:'text',onblur:hide
  });
  self.btn=a.element('button',{
   innerHTML:'▼',onclick:show,style:{width:'2em'}
  });
  self.element.append([self.inp,self.btn,self.ul]);

  self.draw=function(list){
   list=list||[];
   self.ul.innerHTML='';
   for(var i=0;i<<list.length;i++){
    var li=a.element('li',{innerHTML:list[i],onclick:copy});
    self.ul.appendChild(li);
   }
   self.container.appendChild(self.element);
  }
 }

})();