根据select选中的值来做的切换

根据选择下拉菜单的中的值来切换显示内容

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>

JS：

(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();
})