jQueryを使用してナビゲーションのドロップダウンリストの値を変更します

Question

私はドロップダウンリストを持っています。そのオプションはページのさまざまなセクションです。ユーザーはオプションを選択し、指定されたセクションに移動します。ユーザーがページをスクロールすると、ドロップダウンをページのセクションに相当する値に変更します。私は、次のと私はページ上でスクロールすると、ページがセクションにジャンプし続け、私はドロップダウンをクリックしたときに私がドロップダウンリストから任意の値を選択することができません試してみました

<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(); 
    } 
}); 

Answer 1

あなたの問題は、あなたが選択のonchangeイベントをトリガする、それらを設定した後、あなたのオプションのchange()メソッドを呼び出すことです。したがって、スクロールするたびに選択が変更され、onchangeイベントがトリガーされ、現在のセクションを速く残すことができないため、セクションの先頭にスクロールします。 ）（変更のままに声をかけ、それがうまく動作：

https://jsfiddle.net/k2yqujhb/

EDIT：第二の問題については：あなたのコードでは、あなたのセクションの始まりでアンカータグ（<a name="anchor">）が不足しています。しかし、おそらく最初の問題はそれらなしで説明することはできませんので、&をここに貼り付けるのを忘れてしまいました。私は2番目の問題を説明することはできませんが、彼らは選択肢がフィドルで機能するので、まだ多少のものが残っているかもしれません。