根据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');//遍历下拉对象下的optionfor(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();})