jquery - Jquery 選択メニューの可視性の問題

Question

レスポンシブ Web サイト用に 2 つ目のナビゲーション メニューを作成しようとしています。小さな画面でサイトにアクセスすると、フル メニューではなくドロップダウン メニューが表示されます。私はこれを機能させるために使用していますが、何らかの理由で選択メニューが表示されないようです。

ここに私のHTMLがあります：

    <nav class="container clearfix primary">
    <div class="sixteen columns">
        <ul>
            <li><a href="../index.html">home</a></li>
            <li><a href="../about.html">about</a></li>
            <li><a href="../services.html">services</a></li>
            <li><a href="../partners.html">partners</a></li>
            <li><a href="../research.html" class="selected">research</a>

                <ul>
                    <li><a href="extracts.html">Key Extracts & Findings</a></li>
                    <li><a href="contents.html">Report Contents</a></li>
                    <li><a href="segments.html">Mobile VUI Segments</a></li>
                    <li><a href="contributors.html">Participants & Contributors</a></li>
                    <li><a href="bibliography.html">Bibliography</a></li>
                </ul>

            </li>
            <li><a href="../contact.php">contact</a></li>
        </ul>
    </div>
</nav>

これが私のJqueryです：

$(document).ready(function() {

//build dropdown
$("<select />").appendTo(".primary div");

// Create default option "Go to..."
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Go to..."
}).appendTo("nav select");

// Populate dropdowns with the first menu items
$(".primary div ul li a").each(function() {
    var el = $(this);
    $("<option />", {
        "value"   : el.attr("href"),
        "text"    : el.text()
    }).appendTo("nav select");
});

//make responsive dropdown menu actually work
$("nav select").change(function() {
    window.location = $(this).find("option:selected").val();
});

});