使用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更改導航的下拉列表值

回答

相關問題