html select on change

On this jquery select list

http://jsfiddle.net/JTPDM/1/

How would I display the selected value on the page?
So if I selected Admin  after i select it.

Below that it would say.  

You selected: Admin
LVL 1
maqskywalkerAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
HTML
<select>
    <option>Yay</option>
    <option>admin</option>
    <option>Cool</option>
</select>
<div id="result"></div>

Open in new window

jQuery
$(function(){
  $('select').change(function(){
    var html = "You selected " + $(this).val();
    $('#result').html(html);
  });
})

Open in new window

Breaking it down
1. We add a div with an id that we can target for our message
2. We crate a document read block
$(function() {
});
This makes sure that our code runs only when the page is loaded - which avoids unexpected results when JavaScript tries to access parts of the document that don't exist yet
3. We bind an event handler to the select change event so that when a new option is selected the code is called
4. We create our message by concatenating the "You selected " to the currently selected value of the <select>.
Because we are in the <select> event handler $(this) refers to the <select> control and .val() will return the value of the currently selected option
5. Finally we send the string to the <div> with id="result"
0
 
maqskywalkerAuthor Commented:
thanks
0
 
Julian HansenCommented:
You are welcome.
0
All Courses

From novice to tech pro — start learning today.