You use the DOM.
Give the select menu an id.. like, <select id="foo">
Give the hidden element an id.. like, <input type="hidden" id="bar">
Then use the DOM to bind events to them- like this:
var foo = document.getElementById('foo');
var bar = document.getElementById('bar');
Than attach an event handler to the foo element, so that when it is changed, the selected option is set to the hidden input element's value.
if (document.addEventListener !== undefined) {
foo.addEventListener('change', function () {
bar.value = this.options[this.selectedIndex].value;
}, true);
Like this, http://jsfiddle.net/nMHKq/ except that only works in standards-compliant browsers- and also is bad practice because the vars are in global scope. So this is the better way: http://jsfiddle.net/nMHKq/1/
The JavaScript goes in the bottom of the html, like so:
<!doctype html>
<html>
<head>..</head>
<body>
<div><span>...
<script>..</script>
</body>
</html>
