Automatically select an option by associating the div data attribute with the option value?

advertisements

Please take a look at this auto slider (fiddle). The select box is there to allow users to jump to a specific slide. When the slider is on auto-rotate mode, I want the select option to change based on the current slide. Do you think it's possible by getting the data attribute (e.g title1 of the present slide and matching it with the option value title1? Right now the select box is fixed at default option.

<div id="searchslider">

     <div data-title="title1"class="eventslide softblue">
     <h3 class="whitetitle">Title1</h3>
     <div class="slidebackground">
     <p>text</p>
     </div>
     </div>

     <div data-title="title2" class="eventslide softblue">
     <h3 class="whitetitle">Title2</h3>
     <div class="slidebackground">
     <p>Text</p>
     </div></div>

  </div>

</div>

<button id="left">left</button>
<button id="right">right</button>

<select class="select_title">
 <option value="title1">Select</option>
 <option value="title1">Title_1</option>
 <option value="title2">Title_2</option>
</select>

AutoRotate Function:

 function autoRotate(){
  intv = setInterval(function(){
      $('#right').click();
  },10000); //Pause Time
     $('.select_title').prop('selectedIndex',0);
 }

 autoRotate(); // start auto rotate


use this code $('.select_title').prop('selectedIndex',C+1); instead of $('.select_title').prop('selectedIndex',0);

$( document ).ready(function() {

var intv;
var autoRotate;

var sliderplace = $('#searchslider .eventslide');
var W = sliderplace.width();
var N = sliderplace.length;
var C = 0;

$('#searchslider').width( W*N );

$('#left, #right,#auto').click(function(){

  if(this.id=='right'){

    C++;
    C = C % N;     // reset to '0' if end reached

  }else{ // left was clicked

    C--;
    if(C===-1){   // IF C turns -1 scroll to last one (N-1)
      C = N-1;
    }

  }
  $('.select_title').prop('selectedIndex',C+1); // this line added for auto select
  $('#searchslider').stop().animate({left: -C*W }, 500 );
});

 function autoRotate(){
  intv = setInterval(function(){
      $('#right').click();
  },10000); //Pause Time
     $('.select_title').prop('selectedIndex',C+1);
}
autoRotate(); // start auto rotate

// pause hover

$('#event_rotator').on('mouseenter mouseleave', function( e ){
   var mEnt = e.type=='mouseenter';
  if(mEnt){
     clearInterval(intv);
  }else{
     autoRotate();
  }
});
$('.select_title').change(function(){

    var optionSelected = $("option:selected", this);
    var selIndex = $(this).prop("selectedIndex");
    if (selIndex == 0) return false;
    C = selIndex - 1;

     clearInterval(intv);
    if(optionSelected){
        autoRotate(); } 

   $('#searchslider').stop().animate({left: -C*W }, 500 );
});

});

Here http://jsfiddle.net/K3bWS/