How to display a message when a selectbox value is select?

Question

For instance , a selectbox has 3 options

a, b,c

each one has a message assign

a : message for a

b : message for b

c : message for c

What i would like to achieve is when the optiton select , the message will be display next to the selectbox, when the optiton value change, the message will be changed at the same time. The messages are stored in an array

Thank you.

Here is the link of a selectbox, it is not simple selectbox though, as there are three option in each three select box, when a option is selected , that option in the rest of the selectbox will be disabled

http://jsfiddle.net/davidThomas/M33N9/

Answer 1

Proof:

http://jsfiddle.net/iambriansreed/G7Lvx/

HTML:

<select>
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>
​<div id="message"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

JavaScript:

var messages = {
    a: 'Armadillo',
    b: 'Bear',
    c: 'Cougar'
}
$('select').change(function() {
    $('#message').text(messages[$(this).val()]);
});​

Answer 2

Change to this

(var i = 0, len = elem.length; i < len; i++)

from this:

(var i = 0, len = sels.length; i < len; i++)

Answer 3

change your select box to have as value the position of message in your array for example when it shows A, then in change event you can get the message

$('Yourselect').change(function(){
var msg = YourArray[$(this).val()];
// Show it wherever yu want
});