Question

Hi I’m trying to create a basic dropdown menu that allows the user to navigate to specific slides in a jQuery slider. This slider script provides the public method “gotoSlide(index)” and thus one can jump to a specific slide via onClick="jQuery('.slider').Slider().gotoSlide(1); return false;" for instance. I’d like to integrate this linking into a basic HTML dropdown menu form, i.e.

<form name="jumpTo">
    <select name="menu" onChange="...">
    <option value= onClick="jQuery('.slider').Slider().gotoSlide(1); return false;">LINK 1</option>
    <option>...</option>
    </select>
</form>

I’m assuming my syntax is incorrect, and it seems I need to add the proper JS into the “onChange” property to enable navigation within the slider (?), but I’m not sure how to proceed. I’ve seen onChange="window.location=this.options[this.selectedIndex].value;" which seems to work well for regular links, but not for click events.

Thanks for any guidance here.

Answer 1

use change() event of select box… get the value of changed selectbox and call the function gotoSlide() likewise

try this

HTML

<form name="jumpTo">
  <select name="menu" id="selectmenu"> //added an id here
    <option value="1">LINK 1</option> //changed the value to the slider you want to go to
   <option value="2">LINK 2</option>....
 </select>
</form>

JQUERY

$('#selectmenu').change(function(){  //calling change event
     jQuery('.slider').Slider().gotoSlide($(this).val());  //go to slide with the changed value
     return false;

 });