Hace poco tuvimos que resolver un problema algo trivial pero que hasta ahora me había tocado resolver. Consiste en poder seleccionar un valor de un "dropdown list" en una página con un formulario, y que ese mismo valor se seleccione en otra página con otro formulario pero con el mismo "dropdown list". Todo con puro código HTML y JavaScript.
La solución propuesta, a sabiendas de que pueda existir otra mejor, consiste en utilizar el método GET en el primer formulario.
<form method="get" action="part-b.html">
<select name="perro">
<option value="">Seleccion un perro...</option>
<option value="boxer">Boxer</option>
<option value="pastor">Pastor Aleman</option>
</select>
<input type="submit" />
</form>
De esta manera podemos leer el query string con una función que ya he utilizado varias veces, extraemos el parámetro y usamos una sentencia "abra kadabra" de JQuery para seleccionar el "dropdown list" con el parámetro.
<html>
<head>
<script src="jquery.min.js"></script>
<script type="text/javascript">
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
</script>
</head>
<body>
<form method="get" action="d.html">
<select name="perro" id="perros">
<option value="boxer">Boxer</option>
<option value="pastor">Pastor Aleman</option>
</select>
<input type="submit" />
</form>
<script type="text/javascript">
var perro = getUrlVars()["perro"];
$('#perros option[value=' + perro + ']').attr("selected", "selected");
</script>
</body>
</html>
No hay comentarios:
Publicar un comentario