Conserver la sélection de menu déroulant à la page reload

Question

J'ai une liste de sélection sur une page comme ceci:

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

EDIT: Lorsqu'un utilisateur effectue une sélection, la page en cours est actualisé, mais comment puis-je garder le sélection de l'utilisateur visible dans la liste après l'actualisation de la page? En d'autres termes, je ne souhaite pas que la liste revienne à sa valeur sélectionnée par défaut.

Aide s'il vous plaît

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

Voici une solution Javascript uniquement.

<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> 

Ensuite, vous utilisez la fonction this pour voir si le paramètre value est réglé et l'obtenir et vous pouvez utiliser jQuery pour le définir comme selected.

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

Answer 3

Faire sans jQuery:

Créer fonction window.location.getParameter() (voir here de Anatoly Mironov) puis:

<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> 

Pour plus de commodité, je reproduis une excellente fonction .getParameter Anatoly ci-dessous :

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]; 
};