車輪の再発明かも知れないけど割と便利かも

JavaScript

業務システムでは、コードやIDを入力する画面で、

  • サブ画面を開くボタンを押下する
  • サブ画面でコードやIDをマスタから検索する
  • サブ画面で入力対象となるデータを選択する
  • サブ画面は閉じられ、元画面に選択したデータのコードやIDと名称が入力されている

という画面仕様のところがわりとある。しかしコードはテキストフィールドに、名称はラベル（spanタグかな）に入れるということをしなければいけない。今回の業務の仕様では、チェックボックスやセレクトボックスまで一気に設定しないといけないという状況であった。

ということで、以下のようなクラスをつくった。

    function $(id){ return document.getElementById(id) }

    function Recipient(idarray) {
      this.ids = idarray || [];
      this.setValues = function(values) {
        for (var i = 0, len = this.ids.length; i < len; i++) {
          var elmt = $(this.ids[i]);
          if (elmt == null) {
            continue;
          } else if (elmt.type == 'text' || elmt.type == 'hidden') {
            elmt.value = values[i];
          } else if (elmt.type == 'checkbox' || elmt.type == 'radio') {
            elmt.checked = (elmt.value == values[i]);
          } else if (elmt.type == 'select-one' || elmt.type == 'select-multi') {
            for (var j = 0; j < elmt.length; j++) {
              if (elmt.options[j].value == values[i]) {
                elmt.selectedIndex = j;
                break;
              }
            }
          } else {
            elmt.innerHTML = values[i];
          }
        }
      }
    }

コンストラクタには値をセットしたいエレメントのIdを配列で渡しておいて、

var SampleRcpt = new Recipient(['elmtid1', 'elmtid2']);

その配列の順番に値を setValues メソッドに渡してやるだけで、どうセットすればよいかは内部で勝手に判断してくれるというわけである。

  SampleRcpt.setValues(['hoge', 'foo']);

詳しくはこちら（サンプル）(Firefox2とIE6で確認済み)

実は複数チェックボックスや複数選択セレクトボックスには今のところ対応していないが、二次元配列にしちゃえばいいと思う。
われながらよくできてると思うんだけど、やっぱり車輪の再発明か。

追記：複数チェックボックスは id が別れちゃうな・・・