Display Text Based On Dropdown Selection

Question

I'm trying to write some fairly basic code, but not having touched JavaScript in many years, I'm really not sure about the best way to go about it.

The goal: Have a dropdown of 42 arena section numbers that when selected, will display either "Red" or "Black" based on that number. For the sake of being overly informative, the section numbers are:

Black: 103, 105, 107, 111, 113, 115, 119, 121, 123, 127, 129, 131, 201, 203, 205, 207, 209, 217, 219, 221, 223, 225

Red: 104, 106, 110, 112, 114, 116, 120, 122, 126, 128, 130, 132, 202, 204, 206, 218, 220, 222, 224

Does anyone know the best method for going about this? I appreciate the help!

Answer 1

Use the value attributes of option s to contain red or black . The display text will be the number, but the select element val() comes from the value of the selected option.

HTML (shortened for the example):

<select>
    <option value="black">103</option>
    <option value="black">105</option>
    <option value="black">107</option>
    <option value="black">111</option>
    <option value="black">113</option>
    <option value="black">115</option>
    <option value="red">104</option>
    <option value="red">106</option>
</select>

http://jsfiddle.net/25mneof2/1/

$('select').change(function(){
    $('#output').val($(this).val());
});