使用jQuery更改导航的下拉列表值

我有一个下拉列表，其选项是页面的各个部分。用户将选择一个选项，他们将转到该指定的部分。当用户在页面上滚动时，我希望下拉列表更改为相当于页面部分的值。这是下拉：使用jQuery更改导航的下拉列表值

<select name="ddlNavigation" id="ddlNavigation" class="form-control myDropdown" onchange="document.location = this.value;" style="width:100%;"> 
    <option value="#Introduction">Introduction</option> 
    <option value="#EntryRequirements">Entry Requirements</option> 
    <option value="#CourseStructure">Course Structure</option> 
    <option value="#Application">Application</option> 
</select> 
... 

<div id="Introduction" class="contentPanel" Name="Introduction"> 
    .. some content here 
</div> 

<div id="EntryRequirements" class="contentPanel" Name="Introduction"> 
    .. some content here 
</div> 
<div id="CourseStructure" class="contentPanel" Name="Introduction"> 
    .. some content here 
</div> 
<div id="Application" class="contentPanel" Name="Introduction"> 
    .. some content here 
</div>

我曾尝试以下，当我滚动页面时，网页会跳转到一节，当我点击下拉我无法从下拉任意值。

var introduction = $('#Introduction'); 
var entryRequirements = $('#EntryRequirements'); 
var courseStructure = $('#CourseStructure'); 
var application = $('#Application'); 

$(window).bind('mousewheel scroll DOMMouseScroll MozMousePixelScroll scrollstop', function (e) { 
    if (introduction.length > 0 && $(window).scrollTop() < (introduction.height() + introduction.offset().top)) { 
     $('#ddlNavigation').val('#Introduction').change(); 
    } else if ((entryRequirements.length > 0) && $(window).scrollTop() > (introduction.offset().top + introduction.height()) && $(window).scrollTop() < (entryRequirements.offset().top + entryRequirements.height())) { 
     $('#ddlNavigation').val('#EntryRequirements').change(); 
    } else if ((courseStructure.length > 0) && $(window).scrollTop() > (entryRequirements.offset().top + entryRequirements.height()) && $(window).scrollTop() < (courseStructure.offset().top + courseStructure.height())) { 
     $('#ddlNavigation').val('#CourseStructure').change(); 
    } else { 
     $('#ddlNavigation').val('#Application').change(); 
    } 
});

来源

2016-09-26 user2260526

您的代码示例中有很多信息，我们不知道EG的值：entryRequirements和courseStructure。如果您可以将示例代码降至最低，您将得到更好的答案 – TolMera

您的问题是，你叫你的选项change()方法设置它们，这会触发onchange事件选择之后。因此，每次滚动时，选择都会发生变化，然后触发事件，并且由于您无法将当前部分保留得如此之快，因此会滚动回到部分的开头。离开变化（）调用出来，它工作得很好：

https://jsfiddle.net/k2yqujhb/

编辑：至于第二个问题：在你的代码是缺少在您的部分的开始锚标记（<a name="anchor">）。但你可能忘了复制&将它们粘贴在这里，因为没有它们就无法解释第一个问题。尽管如此，我不能解释第二个问题，所以也许还有一些缺失，因为选择在小提琴中起作用。

来源

2016-09-26 08:01:25

使用jQuery更改导航的下拉列表值

回答

相关问题