Drop updating a hiddenfield with an unrelated value

Question

If you wanted to change the value of the hidden field to something not in the value of the dropdown like so

<form>
    <select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
        <option value="foo">One - 42</option>
        <option value="bar">Two - 40</option>
        <option value="wig">Three - 38</option>
    </select>

    <input type="hidden" name="hiddenInput" id="hiddenInput" value="" />
</form>

And i want to pass (if two selected) dropdown="bar" and hiddenInput="40"

The value has to be passed but needs to effect the hiddenfield.

What do you think? Would you need to If then? or could you have it something like

<form>
    <select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
        <option value="foo" onchange="set hiddenInput - 42">One - 42</option>
        <option value="bar" onchange="set hiddenInput - 40">Two - 40</option>
        <option value="wig" onchange="set hiddenInput - 38">Three - 38</option>
    </select>

    <input type="hidden" name="hiddenInput" id="hiddenInput" value="" />
</form>

Answer 1

I'd keep the mapping on the server rather then trying to handle it client side.

Forget the hidden input. Just look up the value based on the value of the dropdown after the data reaches the server.

Answer 2

Unfortunately, you'd need the IF statement. You can use the onclick event for the option tags in Firefox and probably other browsers, but in IE you can't set any events on the option elements, only on the select element.

Answer 3

You have the right idea with the onchange attribute. Your function could look like:

function changeHiddenInput(mySelect) {

    var map = {foo: "42", bar: "40", wig: "38"};
    var index = mySelect.selectedIndex;
    var value = mySelect.options[index].value;

    var hiddenInput = document.getElementById("hiddenInput");
    hiddenInput.value = map[value];
}

The map variable there maps each option's value on to what the hidden attribute should be set to.