如何在重定向URL後設置選定元素？

Question

我得到了<select>元素。如果我選擇了某些東西，我想通過我在<select>中的值更改URL並設置selected=selected。

嘗試是這樣的（jQuery的）：

<script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type = "text/javascript"> 

    $(document).ready(function() { 
     $('#my-select').bind('change', function() { 
      var url = $(this).val(); 
      if (url != '') { 
       window.location = url; 
       $('#my-select').find("option[value='"+url+"']").attr("selected", "selected"); 
      } 
      return false; 
     }); 
    }); 

    </script> 


<select id="my-select" name="category"> 
    <option selected> Please select... </option> 
    <option value="index.php?page=category&s=something1"> something1 </option> 
    <option value="index.php?page=category&s=something2"> something2 </option> 
</select> 

URL改變，但屬性selected未設置。

我到處搜索了大約一個小時，但從來沒有一個適當的例子。請原諒我英語不好。

什麼問題？如何解決這個問題？

Answer 1

嘗試類似的路徑名這（未經測試）。

<script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type = "text/javascript"> 

    $(document).ready(function() { 
     $('#my-select').val(document.location); 

     $('#my-select').bind('change', function() { 
      var url = $(this).val(); 
      if (url != '') { 
       window.location = url; 

      } 
      return false; 
     }); 
    }); 

    </script> 

Answer 2

這很簡單，只是在加載文檔時重定向執行下一個代碼之後。

$('#my-select').val(your_url); 

所以基本上我不知道什麼樣的價值觀是你的選擇，但如果他們是那麼對於VAR YOUR_URL使用

document.location.pathname 

否則

document.location 

Answer 3

你可以你的用戶提供了GET參數重定向要在接下來的頁面加載讀取。

這個JavaScript函數(taken from here)返回所有GET參數：

function getUrlVars() { 
    var vars = {}; 
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { 
     vars[key] = value; 
    }); 
    return vars; 
} 

所以，你會想要做的是這樣的：

$('#my-select').bind('change', function() { 
    var selectionValue = $(this).val(); 
    if (selectionValue != ''){ 
    var getParams = getUrlVars(); 
    // Next line is deciding whether to use a '?' or a '&' 
    // depending if there were already GET parameters in the URL 
    var symbolToUse = (getParams? '&' : '?'); 

    // Remove previous instances of "selected" in the URL. 
    var url = window.location.href.replace(/[&|?]selected=\d+/g,""); 
    window.location.href = url + symbolToUse + "selected="+selectionValue; 
    } 
)} 

當用戶更改爲select元素，其值將被提取並附加到url。

https://repro.com/index.php?page=category&s=something2?selected=4
_{在這裏我們可以看到用戶已經明智地選擇了雞蛋。}

然後你包括你的document.ready回調調用getURLVars()功能 -

$(document).ready(function() { 
    var getParams = getUrlVars(); 
    if (getParams){ 
    // Here we make the selection of the <select> by setting its value 
    // to the same as that of the <option> that was chosen and 
    // placed in the URL as a GET parameter. 
    $('#my-select').val(getParams.selected); 
    } 
    ... 
)} 

，現在你的選擇元素的值將是用戶點擊 - 前提是selected參數包含有效的值。

這也要求您的<option>標籤包含value屬性，僅包含選項的「id」;無需對整個URL，因爲我們使用的是現有的一個 -

<select id="my-select"> 
    <option value="1">FOO</option> 
    <option value="2">BAR</option> 
    <option value="3">SPAM</option> 
    <option value="4">EGGS</option> 
</select>