通过 URL 话题标签更新 select 菜单

Question

我正在尝试更新 select 菜单以匹配幻灯片放映中的每张幻灯片。实际上，幻灯片放映是可收藏的，在 URL 上为每张幻灯片更新了一个主题标签。我的 select 菜单的每个选项都有一个 class，与每张幻灯片的主题标签相匹配。我使用 Cycle2 制作幻灯片，使用 DDslick 制作下拉菜单。但是，即使禁用了 DDslick，我的 javascript 也无法更新 select 菜单。

现在这是我的 javascript;

$( ".cycle-pager span, #prev, #next" ).click(function() {
      if ($('.watch').css('opacity') == '1') {
        var link=$(this).attr('data-cycle-hash');
        var hash = link.substring(link.indexOf('#')+1);
        $('#selectOptions2 option').removeAttr('selected');
        $('#selectOptions2 .'+hash).attr('selected',true);
      }
});

这是 JSfiddle 上的完整示例设置：https://jsfiddle.net/liquilife/du2qztfq/5/

我觉得我真的很接近，只是不确定这里哪里出了问题。

Answer 1

你好，我必须说你滥用了这两个库，尽量不要破解你的出路，仅仅因为它有效就让它成功，试着在没有变通办法的情况下让它正确。

DDsclick 文档：

http://designwithpc.com/Plugins/ddSlick#demo

你可以清楚地看到如何 select 你的元素在 ddsclick selectbox:

$('#demoSetSelected').ddslick('select', {index: i });

Cycle2 文档：

http://jquery.malsup.com/cycle2/api/#auto-init

这里可以看到有一个叫'cycle-after'的事件，是在下一张幻灯片加载完成后触发的，用法是这样的：

$( '#mySlideshow' ).on( 'cycle-eventname', function( event, opts ) {
    // your event handler code here
    // argument opts is the slideshow's option hash
});

并使用您的数据完成所有内容（我更喜欢用 JS 编写数据模型，所以我对其进行了一些更改）：

https://jsfiddle.net/pegla/hwrtrzkh/3/

通过 URL 话题标签更新 select 菜单

Update select menu by URL hashtag

html

javascript

jquery

cycle2