Selectをコピーするには？その２

ｊQuery

昨日の続きなんだが・・・

  $("select").clone().insertAfter(area);

と

  $("select").clone(true).insertAfter(area);

の違いなんだが、「clone(true)」とすると複製した物のイベントハンドラまでをも複製できるのだ。これを知らなかったためにずいぶんと苦労したよ。小1時間ほど悩んだ。

例として、SELECTの一覧を選んで始めて有効になるボタンがあるとする。そのボタンを押すと、SELECTの複製ができる。ボタンを押した時点でボタンはdisabled状態になる。その複製を選んだらボタンは有効になるようなものを作るときに、trueがあるのと無いのでは大きな違いが出るのだよ。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
  $("input:button").click(function(){
    var num = ( $(this).attr("id").split(/_/) )[1];

    var keyId = "#team_" + num;
    var area  = "#area_" + num;

    $(area).before("<br>");
    $(keyId).clone(true).insertBefore(area);
    $(this).attr("disabled","disabled");
  });
  $("select").change(function(){
    var num = ( $(this).attr("id").split(/_/) )[1];

    var sel = "#team_" + num;
    var btn = "#btn_" + num;

    $(btn).removeAttr("disabled");
  });
});

//-->
</script>
</head>
<body>

<table>
<tr><td>
  <select id="team_1" style="width:150px">
  <option value="">（選択してください）</option>
  <option value="1">読売ジャイアンツ</option>
  <option value="2">中日ドラゴンズ</option>
  <option value="3">阪神タイガース</option>
  <option value="4">ヤクルトスワローズ</option>
  <option value="5">広島カープ</option>
  <option value="6">横浜ベイスターズ</option>
  </select>
  <div id="area_1"></div>
</td><td>
  <input id="btn_1" type="button" value="追加" disabled>
</td></tr><tr><td>
  <select id="team_2" style="width:150px">
  <option value="">（選択してください）</option>
  <option value="1">日本ハムファイターズ</option>
  <option value="2">楽天イーグルス</option>
  <option value="3">ソフトバンクフォークス</option>
  <option value="4">西武ライオンズ</option>
  <option value="5">千葉ロッテマリーンズ</option>
  <option value="6">オリックスブルーウェーブ</option>
  </select>
  <div id="area_2"></div>
</td><td>
  <input id="btn_2" type="button" value="追加" disabled>
</td></tr>
</table>

</body>
</html>

clone(true)の「ture」がなければ複製したSELECTを選択してもchangeイベントは動作しない。しかし、「true」とするとイベントをも複製しているのでchangeイベントも動作するのよ。凄いね〜

JavaScriptって本当に凄いよね。

いつの間にオブジェクト指向で書くようになったの？以前までは委細構わず手続き言語のようにガリガリ書いていたのに、オブジェクト指向での書き方をまったく知らない私としては目新しい事ばかりで感動しています。私のJavaScript知識は５年以上遅れているみたいなので少しでも追いつけるようにがんばりたいな。では