Сохраняя выбор выпадающий на перезагрузки страницы

Question

У меня есть список выбора на странице, как это:

<select name='elements'> 
    <option value='water'>Water</option> 
    <option value='fire'>Fire</option> 
    <option value='air'>Air</option> 
</select> 

EDIT: Когда пользователь делает выбор, текущая страница обновляется, но как сделать так, чтобы выбор пользователя отображается в списке после обновления страницы? Другими словами, я не хочу, чтобы список возвращался к выбранному по умолчанию выбранному значению.

Помогите пожалуйста

Answer 1

<select name='elements' onChange='window.location="yoururl.php?value=" + this.value;'> 
    <option value='water'>Water</option> 
    <option value='fire'>Fire</option> 
    <option value='air'>Air</option> 
</select> 

Answer 2

Вот Javascript-единственное решение.

<select name='elements' id='elements' onChange='window.location="yoururl.html?value=" + this.value;'> 
    <option value='water'>Water</option> 
    <option value='fire'>Fire</option> 
    <option value='air'>Air</option> 
</select> 

Затем вы используете this функцию, чтобы увидеть, если параметр value установлен, и получить его, и вы можете использовать JQuery, чтобы установить его в качестве selected.

$("#elements option[value='" + result_of_gup + "']").attr("selected","selected") ; 

Answer 3

Делать это без JQuery:

Создать window.location.getParameter() функцию (см here от Anatoly Mironov) затем:

<select name='elements' id='elements' onChange='window.location="yoururl.html?elements=" + this.selectedIndex;'> 
    <option value='water'>Water</option> 
    <option value='fire'>Fire</option> 
    <option value='air'>Air</option> 
</select> 

<script type="text/javascript"> 
    els = document.getElementById('elements'); 
    selIndex = window.location.getParameter('elements') || 0; 
    els[selIndex].selected = true;​ 
</script> 

Для удобства, я воспроизвожу отличную .getParameter функцию Анатолия ниже :

window.location.getParameter = function(key) { 
    function parseParams() { 
     var params = {}, 
      e, 
      a = /\+/g, // Regex for replacing addition symbol with a space 
      r = /([^&=]+)=?([^&]*)/g, 
      d = function (s) { return decodeURIComponent(s.replace(a, " ")); }, 
      q = window.location.search.substring(1); 

     while (e = r.exec(q)) 
      params[d(e[1])] = d(e[2]); 

     return params; 
    } 

    if (!this.queryStringParams) 
     this.queryStringParams = parseParams(); 

    return this.queryStringParams[key]; 
};