8 月
24

JavaScript select要素のオプションデータを非同期に取得

2007年8月24日

Yahoo! UI Libraryを使用して、select要素のオプションデータを非同期に取得するメモです。

サーバー側は、次のようなJSON形式のデータを返します。

PLAIN TEXT
JavaScript:
  1. [{"id":"1","name":"test"},{"id":"2","name":"test2"}]

クライアント側のJavaScriptのサンプルです。
onLabelClickは、Yahoo! UI LibraryのTreeviewのラベルをクリックしたときに呼ばれる関数です。

PLAIN TEXT
JavaScript:
  1. function onLabelClick(node)
  2. {
  3.   var form_elem = document.getElementById("form_edit");
  4.   if (!form_elem) {
  5.     return;
  6.   }
  7.  
  8.   var sel_elem = document.getElementById("sel_foo");
  9.   var sel_children = sel_elem.childNodes;
  10.   var count = sel_children.length;
  11.   YAHOO.log("count: " + count);
  12.   for (var i=count-1;i>0;i--) {
  13.     var opt_elem = sel_children[i];
  14.     sel_elem.removeChild(opt_elem);
  15.   }
  16.   // node.data.idは、選択リストを取得するキー(グループIDのようなもの)
  17.   getFoo(node.data.id);
  18. }
  19.  
  20. function getFoo(cid)
  21. {
  22.   var sig_elem = document.getElementById("transaction_sig");
  23.   var transaction_sig = 0;
  24.   if (sig_elem) {
  25.     transaction_sig = sig_elem.value;
  26.   }
  27.  
  28.   YAHOO.util.Connect.initHeader('X-Signature', transaction_sig);
  29.  
  30.   var con_url = "/URL" + cid;
  31.  
  32.   var con_obj = YAHOO.util.Connect.asyncRequest('GET',con_url,callback);
  33. }
  34.  
  35. var handleSuccess = function(o)
  36. {
  37.   // o.responseTextは、JSON形式のデータ
  38.   var data = null;
  39.   if (o.responseText) {
  40.     data = eval(o.responseText);
  41.   }
  42.  
  43.   var sel_elem = document.getElementById("sel_foo");
  44.  
  45.   var item_list = new Array();
  46.   var key=0;
  47.   item_list[key] = new Option("(未選択)",key);
  48.   key++;
  49.  
  50.   var is_error = false;
  51.   if (data[0]['bar_error_code']) {
  52.     var elem = document.getElementById("js_error");
  53.     if (elem) {
  54.       var p = document.createElement("p");
  55.       if (data[0]['bar_error_msg']) {
  56.         p.innerHTML = data[0]['bar_error_msg'] + '[' + data[0]['bar_error_code'] + ']';
  57.       }
  58.       else {
  59.         p.innerHTML = data[0]['bar_error_code'];
  60.       }
  61.       elem.appendChild(p);
  62.     }
  63.     is_error = true;
  64.   }
  65.  
  66.   if (is_error == false && data) {
  67.     for (var i in data) {
  68.       item_list[key] = new Option(data[i].name,data[i].id);
  69.       key++;
  70.     }
  71.   }
  72.  
  73.   sel_elem.options.length = item_list.length;
  74.   for (i=0;i<item_list.length;i++) {
  75.     sel_elem.options[i] = item_list[i];
  76.   }
  77. }
  78.  
  79. var handleFailure = function(o) {
  80.  
  81. };
  82.  
  83. var callback =
  84. {
  85.   success:  handleSuccess,
  86.   failure:  handleFailure,
  87.   argument: ['','']
  88. };

Tags: ,

JavaScript RSS フィード

コメントをどうぞ