フォームデザイン（フォーム部品選択フィルタ「:selected」）

jQuery フォームデザイン

フォームデザインのフィルタはこれが最後かな？

selectタグで選択されている「フォーム部品」を取得する。
この「フォーム部品」てのは、selectタグについてはoptionになるのかなぁ。
そこらへんの定義がよくわからん。
ま、jQueryに関しては「使えるようになる」ことが目的なのであんまり深追いしない。
すくなくとも現時点では。

以下のサンプルでは前のエントリで触れた子セレクターを使っている。

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
      $(function(){
        //ラジオボタンのサンプル
        $("#sex_selector").change(function() {
          var values = "";
          $("#sex_selector :selected").each(function() {
            values += $(this).val() + "\n";
          })
          alert(values);
        });
        //チェックボックスのサンプル
        $("#hobby_confirm").click(function() {
          var values = "";
          $("#hobby_selector :selected").each(function() {
            values += $(this).val() + "\n";
          })
          alert(values);
        });
      })
    </script>
  </head>
  <body>
    <form name="sex">
      <select name="sex" id="sex_selector">
	<option value="man">男性</option>
	<option value="woman">女性</option>
      </select>
    </form>
    <br/>
    <form name="hobby">
      <select name="hobby" id="hobby_selector" size="3" multiple>
	<option value="football">サッカー</option>
	<option value="tennis">テニス</option>
	<option value="2ch">２ちゃん</option>
      </select>
      <input type="button" id="hobby_confirm" value="確認"/>
    </form>
  </body>
</html>

さぁ〜、これでやっと通信部分のセクションに入れるぞーーーッ！！