OSDN -- Develop and Download Open Source Software
edit | Title Index |  Recent Changes  | 

絞り込み選択リストボックス(NarrowDownSeletionList.js)です。

このスクリプトは、同梱のUtils.jsが予めロード済みであることを前提としています。

パラメータ

NarrowDownSeletionListは1つの必須パラメータを要求します。

  • listItems: リストの構造データ。以下の例を参考にしてください。

以下のパラメータはオプションです。

  • initialValue: 初期値。(*1)
  • warnIncompleteInput: 最後まで入力していない時、警告メッセージを表示するか否か。デフォルトはfalse。
  • initialAutoSelected: 絞り込み選択リストを最初に表示したときに、自動選択(*2)を有効にするか否か。デフォルトはfalse。
  • sendAllLevelValues: 全てのレベルの値をサーバへ送信するか否か。falseの場合は選択状態の最末端レベルの値のみ送信される。デフォルトはfalse。

(*1) 最末端レベルの初期値のみ指定できます。途中のレベルでの初期値の指定はできません。

(*2) 選択肢が一つしかない場合、自動で選択状態にしておく機能。

指定するデータ構造

絞り込みリストを表現するデータ構造は次のとおりです。

キー値"@"にメタデータを入れ、それ以外のエントリはリスト構造を表す再帰的木構造を成します。 

  1.  {
  2.    "@": { "name": [selectタグのname属性の値], "value": [optionタグのvalue属性の値] },
  3.  
  4.    "要素1見出し": {
  5.      (以下、再帰構造…)
  6.    },
  7.  
  8.    "要素2見出し": {
  9.      (以下、再帰構造…)
  10.    },
  11.  
  12.    ...
  13.  }

具体例は次のサンプルコードを参照してください。

サンプルコード

  1.  <html>
  2.  
  3.  <head>
  4.  <script src="./Utils.js"></script>
  5.  <script src="./NarrowDownSelectionList.js"></script>
  6.  </head>
  7.  
  8.  <body>
  9.  <form method="post" action="http://localhost:8080/">
  10.      <div id="sample"></div>
  11.      <input type="submit" value="確認" />
  12.  </form>
  13.  </body>
  14.  
  15.  <script>
  16.      var ndsl = new NarrowDownSelectionList(document);
  17.  
  18.      ndsl.setListItems({
  19.          "グループA": {
  20.              "@": { "name": "lvl1", "value": "A" },
  21.              "グループA-1": {
  22.                  "@": { "name": "lvl2", "value": "A1" },
  23.                  "グループA-1-0": {
  24.                      "@": { "name": "lvl3", "value": "A10" }
  25.                  },
  26.                  "グループA-1-1": {
  27.                      "@": { "name": "lvl3", "value": "A11" }
  28.                  },
  29.                  "グループA-1-2": {
  30.                      "@": { "name": "lvl3", "value": "A12" }
  31.                  }
  32.              },
  33.              "グループA-2": {
  34.                  "@": { "name": "lvl2", "value": "A2" },
  35.                  "グループA-2-0": {
  36.                      "@": { "name": "lvl3", "value": "A20" }
  37.                  },
  38.                  "グループA-2-1": {
  39.                      "@": { "name": "lvl3", "value": "A21" }
  40.                  },
  41.                  "グループA-2-2": {
  42.                      "@": { "name": "lvl3", "value": "A22" }
  43.                  }
  44.              }
  45.          },
  46.  
  47.          "グループB": {
  48.              "@": { "name": "lvl1", "value": "B" },
  49.              "グループB-1": {
  50.                  "@": { "name": "lvl2", "value": "B1" },
  51.                  "グループB-1-0": {
  52.                      "@": { "name": "lvl3", "value": "B10" }
  53.                  },
  54.                  "グループB-1-1": {
  55.                      "@": { "name": "lvl3", "value": "B11" }
  56.                  },
  57.                  "グループB-1-2": {
  58.                      "@": { "name": "lvl3", "value": "B12" }
  59.                  }
  60.              },
  61.              "グループB-2": {
  62.                  "@": { "name": "lvl2", "value": "B2" },
  63.                  "グループB-2-0": {
  64.                      "@": { "name": "lvl3", "value": "B20" }
  65.                  },
  66.                  "グループB-2-1": {
  67.                      "@": { "name": "lvl3", "value": "B21" }
  68.                  },
  69.                  "グループB-2-2": {
  70.                      "@": { "name": "lvl3", "value": "B22" }
  71.                  }
  72.              }
  73.          }
  74.      });
  75.  
  76.      // 初期値を復元する場合はこちら
  77.      //ndsl.setInitialValue("A21");
  78.  
  79.      var select = ndsl.createNarrowDownSelectListElement();
  80.      document.getElementById("sample").appendChild(select);
  81.      
  82.  </script>
  83.  </html>
edit history delete
config

[PageInfo]  LastUpdate: 2010-08-14 20:13:49, ModifiedBy: takahashikzn
[Permissions]  view:all, edit:members, delete/config:members
[IRI]  https://osdn.net/projects/r42utils/wiki/r42utils_js_NarrowDownSelectionList