试图通过jquery控制选择菜单-简单但无法实现

Question

我正试图通过jquery来控制选择菜单项，并希望将它们表现为选项卡。但没有运气..。任何帮助都很感激。

提前感谢！

$('#box-wrap .box').eq(0).css({'display':'block'});
$('.select-menu').on('change', function(){                                      
    $('.select-menu option:selected').each(function(){      
            $('#box-wrap .box').fadeOut();
            $('#'+ $(this).data('url')).fadeIn();
            });
        }); 

这里是jsfiddle url：

http://jsfiddle.net/mufeedahmad/FLzQc/1/

Answer 1

假设您希望这样：

当从第一选择中选择选项时，框应显示为从第一选择的选择中选择的选项，当从第二选择中选择选项时，则显示为第二选择所选的选项。

所用代码：

$('#box-wrap .box').eq(0).css({'display':'block'});
$('.select-menu').on('change', function(){                                          
    var option_id = $(this).find('option:selected').data('url');        
    $('.box').each(function(){
        if($(this).attr('id') === option_id){
          $(this).fadeIn(); 
        } else {
           $(this).fadeOut();  
        }
    });    
});   

Fiddle演示: http://jsfiddle.net/budhram/pUse5