Nuovo per javascript, ma sono sicuro che questo è facile. Sfortunatamente, la maggior parte dei risultati di Google non è stata utile.Javascript per impostare il valore nascosto del modulo sul menu a tendina
In ogni caso, voglio impostare il valore di un elemento di forma nascosta tramite javascript quando cambia una selezione a discesa.
Posso usare jQuery, se è più semplice ottenere o impostare i valori.
Se si dispone di codice HTML in questo modo, per esempio:
<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=''>
Tutto quello che dovete fare è bind a function to the change event of the select, e fare quello che serve c'è:
<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>
Tutto considerato, se hai intenzione di fare un sacco di programmazione jQuery, hai sempre il documentation aperto. È molto facile trovare quello che ti serve se gli dai un'opportunità.
Qui è possibile impostare il valore di nascosto all'evento onchange di elenco a discesa:
$('#myDropDown').bind('change', function() {
$('#myHidden').val('setted value');
});
vostra lista nascosti e discesa:
<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>
Questo è con jQuery.
$('#selectFormElement').change(function() {
$('#hiddenFormElement').val('newValue');
});
Nel html
<select id="selectFormElement" name="..."> ... </select>
<input type="hidden" name="..." id="hiddenFormElement" />
solo per essere diverso, cambiato la mia risposta in modo che la questione non ha 5 risposte con lo stesso codice.
<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>
puro javascript all'interno di un modulo
ho avuto l'impressione che l'uso di "this.form.elementName" è stata sconsigliata a favore di "document.getElementById ('xx ') " ... – ChristianLinnell
dipende dalla situazione – 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>
Sono nuovo al gioco:" onchange "è consentito dalla politica di sicurezza del contenuto? – selig
avevo combattuto con questo molto tempo $('#myelement').val(x) semplicemente non funzionava ... fino a quando mi sono reso conto della La costruzione di # richiede un ID, non un NOME. Quindi se ".val(x) non funziona!" è il tuo problema, controlla il tuo elemento e assicurati che abbia un ID!
È un trucco imbarazzante, ma ho sentito che dovevo condividere per salvare altri strappi.
Whoops ... Ho appena avuto lo stesso problema! – KingCronus
$(function() {
$('#myselect').change(function() {
$('#myhidden').val =$("#myselect option:selected").text();
});
});
le "nuove risposte sono state pubblicate" sembravano aver fallito su tutti noi, lol –