根據選擇下拉選單的中的值來切換顯示內容

HTML：

<select name="">
	<option value="" selected="true">選擇內容1</option>
	<option value="">選擇內容2</option>
	<option value="">選擇內容3</option>
	<option value="">選擇內容4</option>
</select>
<p>要顯示的內容1</p>
<p style="display:none;">要顯示的內容2</p>
<p style="display:none;">要顯示的內容3</p>
<p style="display:none;">要顯示的內容4</p>
 

(function($){
	$.fn.selectTab = function(o){
			var d = {
				select:'select', //定義下拉物件
				con:'p'          //定義切換物件
			};
			var o = $.extend(d,o);
			var $option = $(d.select).find('option');//遍歷下拉物件下的option
			for(var i = 0; i < $option.length; i++){
				$option.eq(i).attr('i',i);	//設定option 屬性i從下標為0開始賦值
			}
			selectFn();
			$(d.select).change(function(){
				selectFn();
			})
			function selectFn(){
				var selectedIndex = $(d.select).find('option:selected').attr('i'); //儲存被選中的option的屬性i的值
				$(d.con).eq(selectedIndex).show().siblings(d.con).hide();       //顯示對應顯示的物件
			}
	}
})(jQuery);
$(function(){
	$().selectTab();
})