忍者ブログ

2018
06
23

[PR]

×

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

2018/06/23 (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 メソッドの引数は、配列です。配列の要素には次の3種類を想定しています。

配列

配列の要素も配列の場合、その1番目の要素を OPTION 要素の value に、2番目の要素を 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);
  }
 }
})();

収録先

neta.elements.js
PR

2010/11/09 (Tue.) Trackback(0) Comment(0) JavaScript

Comments

名前
メールアドレス
URL
コメント
PASS  Vodafone絵文字 i-mode絵文字 Ezweb絵文字

Trackback

Trackback for this entry:

Links

ご注意

当サイトのスクリプトは、ブラウザが FireFox 3.0 であることを前提に作成されています。IE などでは正常に動作しないものがあります。

カテゴリー

ブログ内検索

最新記事

カレンダー

05 2018/06 07
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

アーカイブ

RSS

最新CM

[04/15 jTemplate]
[05/22 寝太郎]

プロフィール

HN:
寝太郎
性別:
非公開

バーコード

P R

アクセス解析

リンク

NSM

コガネモチ

フリーエリア