先日、Webデザイナーの集会で嘘くさい？jQueryの基礎みたいなお話をしたのですが、その時にこのような質問が出ました。

複数のセレクトボックスを配置した時、選ばれた要素のテキストをまとめて表示する事って出来ないんですか？

そんな訳でちょっと書いてみたのですが、こんな動作で宜しいのでしょうか？

View Demo

jQueryのソースコードは以下の通り

$(function()
{
	var cnt = 4;
	for (var i=1; i < cnt; i++)
	{
		$("select#item" + i).change(function()
		{
			var str = "";
			$("select option:selected").each(function()
			{
				str += $(this).text() + "<br />";
			});
			$("div.selectedBox p").html(str);
		});
	}

});

1. select要素のIDを"item + 連番"と決めてselect要素の数だけfor文を使ってループさせます。（id="item1"からスタートするため、cntの値はselect要素数＋1とします）
2. .change(function(){...});を使ってセレクトボックスの値が変わる度にdiv.selectedBoxのp要素の値を書き換えます。（changeイベントは値の変更が完了した段階で実行されるイベント。）
3. セレクトボックスで選択されたテキスト要素を格納する変数strを空にします。
4. option要素の中でselected属性が付加されたテキスト要素（選択された要素）をstrにセットします。
5. .html()でdiv.selectedBox pにstrの値を出力します。