根据选择下拉菜单的中的值来切换显示内容
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();
})