Tabbing behavior in two select boxes.

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. Also, reset other select when one is selected.

by Budhram Gurung

HTML

<div id="drop-nav">
  <select name="menu" class="select-menu">
    <option data-url="option1">option 1</option>
    <option data-url="option2">option 2</option>
    <option data-url="option3">option 3</option>
    <option data-url="option4">option 4</option>
  </select>
  <select name="menu" class="select-menu">
    <option data-url="option5">option 5</option>
    <option data-url="option6">option 6</option>
    <option data-url="option7">option 7</option>
    <option data-url="option8">option 8</option>
  </select> 
</div>
<div id="box-wrap">
  <div class="box" id="option1"> Option1 </div>
  <div class="box" id="option2"> Option2 </div>
  <div class="box" id="option3"> Option3 </div>
  <div class="box" id="option4"> Option4 </div>
  <div class="box" id="option5"> Option5 </div>
  <div class="box" id="option6"> Option6 </div>
  <div class="box" id="option7"> Option7 </div>
  <div class="box" id="option8"> Option8 </div>
</div>

CSS

#box-wrap{position:relative}
.box{border:10px solid red;width:190px;display:none;font-size:24px;position:absolute}
#option2{border-color:#060}
#option3{border-color:#900}
#option4{border-color:#609}

JavaScript

$('#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();  
        }
    });        
    console.log($(this).siblings().find('option:first'));
    $(this).siblings().val($(this).siblings().find('option:first').val());
});