通过简单的html下拉菜单浏览jQuery图像滑块

时间:2013-02-05 07:15:44

标签: jquery forms drop-down-menu menu slider

您好我正在尝试创建一个基本的下拉菜单,允许用户导航到jQuery滑块中的特定幻灯片。此滑块脚本提供公共方法“gotoSlide(index)”,因此可以通过onClick="jQuery('.slider').Slider().gotoSlide(1); return false;"跳转到特定幻灯片。我想将这个链接集成到一个基本的HTML下拉菜单中,即

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

我假设我的语法不正确,似乎我需要将正确的JS添加到“onChange”属性中以启用滑块(?)中的导航,但我不知道如何继续。我见过onChange="window.location=this.options[this.selectedIndex].value;"这似乎适用于常规链接,但不适用于点击事件。

感谢您提供任何指导。

1 个答案:

答案 0 :(得分:1)

使用选择框的change()事件...获取已更改选择框的值并同样调用函数gotoSlide()

试试这个

<强> 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;

 });