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

2024
04
20

[PR]

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

2024/04/20 (Sat.)

2010
11
09

リストボックスを JavaScript で作る。

前回の「JavaScript でHTML要素を生成する関数」の記事で JavaScriptでHTML要素を生成する関数として、neta.elements.element　を作成しました。今回は、これを利用してリストボックスを作成しましょう。

リストボックスは、選択肢のリストを表示しその中から値を選ばせるものです。HTMLのフォーム部品では、SELECT がこれに当たります。今回紹介する neta.elements.ListBox でも、まず SELECT 要素を生成します。

ListBox コンストラクタの書式

listbox=new neta.elements.ListBox(container)

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

draw メソッドの書式

listbox.draw(list)

引数のリストから OPTION 要素を生成して SELECT 要素に追加します。そして、文書の指定した箇所に SELECT 要素を配置します。

draw メソッドの引数

draw メソッドの引数は、配列です。配列の要素には次の３種類を想定しています。

配列

配列の要素も配列の場合、その１番目の要素を OPTION 要素の value に、２番目の要素を innerHTML に割当てます。

[[1,'A'], [2,'B'], [3,'C']]

オブジェクト

配列の要素がオブジェクトの場合、v プロパティの値を OPTION 要素の value に、f プロパティの値を innerHTML に割当てます。

[[1,'A'], [2,'B'], [3,'C']]

文字列、数値

配列の要素が文字列か数値の場合、その値を OPTION 要素の value と innerHTML の双方に割当てます。

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

記述例

neta.addListener(function(){
 var container=document.getElementById('container');
 var listbox=new neta.elements.ListBox(container);
 listbox.draw(['A','B','C']);
 var container2=document.getElementById('container2');
 var listbox2=new neta.elements.ListBox(container2);
 listbox2.draw(['E','F','G']);
 document.getElementById('btn').onclick=function(){
  alert(
   listbox.element.value +' と '
   +listbox2.element.value +' が選択されました');
 }
});

実行例

ソースコード

if(!window['neta'])window['neta']={};
if(!window['neta']['elements'])window['neta']['elements']={};
(function(){
 var a=neta.elements;
 a.ListBox=function(container){
  this.container=container||document.body;
  this.element=a.element('select');
  var self=this;

  self.draw=function(list){
   list=list||[];
   self.element.innerHTML='';
   for(var i=0,val,formatted;i<list.length;i++){
    if(typeof list[i]!='object'){
     val=list[i];formatted=list[i];
    }else if(list[i].length){
     val=list[i][0];formatted=list[i][1];
    }else{
     val=list[i]['v'];formatted=list[i]['f'];
    }
    var opt=a.element('option',{value:val,innerHTML:formatted});
    self.element.append(opt);
   }
   self.container.appendChild(self.element);
  }
 }
})();