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下拉列表不显示选定的项目。

回答

相关问题