Nuevo en javascript, pero estoy seguro de que esto es fácil. Lamentablemente, la mayoría de los resultados de google no han sido útiles.Javascript para establecer el valor del formulario oculto en el cambio desplegable
De todos modos, quiero establecer el valor de un elemento de formulario oculto a través de javascript cuando una selección desplegable cambia.
Puedo usar jQuery, si hace que sea más fácil obtener o establecer los valores.
Si usted tiene HTML como este, por ejemplo:
<select id='myselect'>
<option value='1'>A</option>
<option value='2'>B</option>
<option value='3'>C</option>
<option value='4'>D</option>
</select>
<input type='hidden' id='myhidden' value=''>
Todo lo que tiene que hacer es bind a function to the change event of the select, y hacer lo que tiene ahí:
<script type='text/javascript'>
$(function() {
$('#myselect').change(function() {
// if changed to, for example, the last option, then
// $(this).find('option:selected').text() == D
// $(this).val() == 4
// get whatever value you want into a variable
var x = $(this).val();
// and update the hidden input's value
$('#myhidden').val(x);
});
});
</script>
A fin de cuentas, si va a hacer mucha programación jQuery, siempre tenga abierto el documentation. Es muy fácil encontrar lo que necesita allí si le da una oportunidad.
Aquí se puede establecer el valor del escondida en el evento onchange de la lista desplegable:
$('#myDropDown').bind('change', function() {
$('#myHidden').val('setted value');
});
su lista oculta y baja:
<input type="hidden" id="myHidden" />
<select id="myDropDown">
<option value="opt 1">Option 1</option>
<option value="opt 2">Option 2</option>
<option value="opt 3">Option 3</option>
</ select>
Esto es con jQuery.
$('#selectFormElement').change(function() {
$('#hiddenFormElement').val('newValue');
});
En el html
<select id="selectFormElement" name="..."> ... </select>
<input type="hidden" name="..." id="hiddenFormElement" />
sólo para ser diferente, cambiado mi respuesta para que esta pregunta no tiene 5 respuestas con el mismo código.
<html>
<head>
<title>Page</title>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(function() {
var select = $("body").append('<form></form>').children('form')
.append('<input type="hidden" value="" />').children('input[type=hidden]')
.attr('id', 'hiddenValue').end()
.append('<select></select>').children('select')
.attr('id', 'dropdown')
.change(function() {
alert($(this).val());
});
$.each({ one: 1, two: 2, three: 3, four: 4, five: 5 }, function(txt, val) {
select.append('<option value="' + val + '">' + txt + '</option>');
});
});
</script>
</head>
<body></body>
</html>
<form>
<input type="hidden" name="selval">
<select onchange="this.form.selval.value=this.selectedIndex">
<option>val1</option>
<option>val2</option>
</select>
</form>
javascript puro desde el interior de una forma
que estaba bajo la impresión de que el uso de "this.form.elementName" desfasada y en favor de "document.getElementById ('xx ') " ... – ChristianLinnell
depende de la situación – Jim
Plain Old Javascript:
<script type="text/javascript">
function changeHiddenInput (objDropDown)
{
var objHidden = document.getElementById("hiddenInput");
objHidden.value = objDropDown.value;
}
</script>
<form>
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="hidden" name="hiddenInput" id="hiddenInput" value="" />
</form>
Soy nuevo en el juego. ¿La política de seguridad de contenido permitirá' onchange'? – selig
que había luchado con esto por mucho tiempo $('#myelement').val(x) simplemente no estaba funcionando ... hasta que me di cuenta de la # construcción requiere una identificación, no un NOMBRE. Entonces, si ".val(x) no funciona" es tu problema, revisa tu elemento y asegúrate de que tenga una ID!
Es un boch embarazoso, pero sentí que tenía que compartir para salvar a otros mucho desgarrador.
¡Vaya! ¡Acabo de tener el mismo problema! – KingCronus
$(function() {
$('#myselect').change(function() {
$('#myhidden').val =$("#myselect option:selected").text();
});
});
las "nuevas respuestas han sido escritos" parecía haber fracasado en todos nosotros, lol –