Jquery下拉列表不顯示選定的項目。

我有一個菜單Jquery下拉列表不顯示選定的項目。

<nav> 
    <ul id="menu"> 
     <li> <a href="@Url.Action("Index", "Home")" title="Home">HOME</a></li> 
     <li><a href="@Url.Action("Index","Project")" title="Project">PROJECTS</a></li> 
     <li><a href="@Url.Action("Index","Event")" title="Event">EVENTS</a></li> 
     .... 
    </ul> 
</nav>

我小屏幕的情況下（移動/片）我改變該菜單爲使用jquery一個下拉列表。

@if (!string.IsNullOrEmpty(ViewBag.CurrentPage)) {   
    <script type="text/javascript"> 
$(function() { 
    $("a[[email protected]]").addClass("active"); 

    $("<select />").appendTo("nav"); 
    // Create default option "Go to..." 
    $("<option />", { 
     "selected": "selected", 
     "value": "", 
     "text": "Go to..." 
    }).appendTo("nav select"); 
    // Populate dropdown with menu items 
    $("nav ul a").each(function() { 
     var el = $(this); 
     $("<option />", { 
      "value": el.attr("href"), 
      "text": el.text(), 
      'selected': el.hasClass('selected') 
     }).appendTo("nav select"); 
    }); 
    //$("nav select").change(function(){ 
    $('nav').on('change', 'select',function() { 
     window.location = $(this).val(); 
     // window.location = $(this).find("option:selected").val(); 
    }); 
    <script type="text/javascript"> 
}

（活性類用於大屏幕）。我的問題是，假設「項目」頁被加載時，所選擇的下拉項爲「轉到」。我想將其更改爲當前加載的頁面名稱。怎麼可能。

我使用下面的CSS。

nav select { display: none;} 
#menu {......} 
#menu li a { color:#282826; font-size:16px; } 
#menu li .active { color:#3b619b; padding-bottom:5px;border-bottom:4px solid #99a13f; } 

@media handheld, only screen and (max-width: 767px) { 
    nav #menu  { display: none; } 
nav select { display: inline-block; width:80%; margin-top:10px;margin-bottom:10px;margin-  left:20px;} 
}

來源

2013-07-29 ParVathi

工作樣本：

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
</head> 
<body> 
<nav> 
    <ul id="menu"> 
     <li><a href="Home" title="Home">HOME</a></li> 
     <li><a href="Project" title="Project">PROJECTS</a></li> 
     <li><a href="Event" title="Event">EVENTS</a></li> 
    </ul> 
</nav> 
    <script type="text/javascript"> 
$(function() { 
    $("a[title=Project]").addClass("active"); 

    $("<select />").appendTo("nav"); 
    // Create default option "Go to..." 
    $("<option />", { 
     "selected": "selected", 
     "value": "", 
     "text": "Go to..." 
    }).appendTo("nav select"); 
    // Populate dropdown with menu items 
    $("nav ul a").each(function() { 
     var el = $(this) 

     ,opt = { 
      "value": el.attr("href"), 
      "text": el.text() 

     }; 
     if (el.hasClass('active')) { 
      opt.selected = 'selected'; 
     } 
     //console.log(el,el.hasClass('active'),opt); 
     $("<option />", opt).appendTo("nav select"); 
    }); 
    //$("nav select").change(function(){ 
    $('nav').on('change', 'select',function() { 
     window.location = $(this).val(); 
     // window.location = $(this).find("option:selected").val(); 
    }); 
    }); 

</script> 
</body> 
</html>

來源

2013-07-29 15:35:11 cske

非常感謝你。它工作 – ParVathi

Jquery下拉列表不顯示選定的項目。

回答

相關問題