CODEWITHSUNDEEP
javascriptjquery
Mufeed Ahmad
Mufeed Ahmad

Reputation: 485

Trying to control select menu via jquery - simple thing but unable to achieve

I am trying to control select menu items via jquery and want to behave them like tabbing.. but no luck.. any help much appreciated.

Thanks in advance!

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

here is jsfiddle url:

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

Upvotes: 0

Views: 36

Answers (1)

Dhanu Gurung
Dhanu Gurung

Reputation: 8840

Assuming that you want like this:

When option is selected from 1st select, the box should show as option from 1st select's selected option and when option is selected from 2nd select, then 2nd select selected option.

Code Used: 

$('#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 Demo : http://jsfiddle.net/budhram/pUse5

Upvotes: 1

Related Questions