頁面更改後保留所選下拉選項

因此，我構建了我的第一個響應網站，但在移動設備上遇到菜單問題。這一切都有效，因此，當您使用手機時，您可以從下拉列表中選擇一個選項（下面的HTML），它會帶您離開正確的頁面。然而，當頁面加載時，默認回到'Home'列表中的第一個選項。頁面更改後保留所選下拉選項

這意味着當您在另一頁上時不能選擇家庭。但是我需要的是選擇該選項併爲所選的那個加載新頁面，然後成爲默認選項。所以你可以使用下拉菜單回到主頁。

我以前沒有這樣做過，所以希望它很簡單！

HTML：

<form id="mobile_nav"> 
      <select id="mobile_menu"> 

<option value="/">Home</option>   
<option value="/page 1/">page 1</option> 
<option value="/page 2/">page 2</option> 
<option value="/page 3/"page 3</option> 
<option value="/page 4/"page 4</option> 
<option value="/page 5/"page 5</option> 

      </select> 
</form>

JS：

jQuery(document).ready(function() { 
     nav(); 

      jQuery("#mobile_menu").val(location.pathname); 

     jQuery("#mobile_menu").change(function() { 
      document.location = jQuery(this).val(); 
     });

的JS使移動設備上的下拉菜單。

讓我知道你是否需要任何信息和謝謝。

來源

2013-04-08 Josh Davies

這可能幫助：

jQuery(document).ready(function(){ 
    jQuery("#mobile_menu").val(location.pathname) 
});

這將嘗試設置的#mobile_menu相同的位置（當前URL）的路徑部分的價值。

來源

2013-04-08 12:41:31

非常感謝。路徑名比href工作得更好，因爲它不需要獲取整個URL。我會更新答案。再次感謝！ – 2013-04-08 14:27:59

您可以使用document.URL知道當前的URL。將此URL與下拉列表中的值進行比較，您可以在頁面加載時選擇相應的選項。例如。您可以使用類似這樣的方法：

var currentURL = document.URL; 
if (currentURL.indexOf("home")) 
{ 
    $("#mobile_nav select").val("home"); 
}

來源

2013-04-08 12:41:28

這是否意味着我將不得不在下拉菜單中爲每個選項做if語句？ – 2013-04-08 14:03:37

是的。或者如果您的值與URL相同，則可以使用'$（「＃mobile_nav select」）。val（document.URL）;' – 2013-04-09 04:51:44

使用window.location.href來獲得當前位置，並選擇

jQuery(document).ready(function(){ 
    jQuery("#mobile_menu").val(window.location.href); 
});

來源

2013-04-08 12:42:27 bipen

我在這方面的知識已經過時，但是這可能會帶來一些想法（我希望）。

<head> 
    <script> 
    function makeDefault(elm) { 
     elm.options[elm.selectedIndex].selected = 'selected'; 
     alert(elm.innerHTML); 
    } 
    </script> 
</head> 
<body> 
    <form id="mobile_nav"> 
    <select id="mobile_menu" onchange="makeDefault(this)"> 
     <option value="/">Home</option>   
     <option value="/page 1/">page 1</option> 
     <option value="/page 2/" selected='selected'>page 2</option> 
    </select> 
    </form> 
</body>

來源

2013-04-08 13:07:09 seeker

頁面更改後保留所選下拉選項

回答

相關問題