Populate a DIV from a Form Select with jQuery

Have you ever wanted to populate a div with some specified text based on a form select. Below is my super simple solution.

First you will need to add a select into your form and create the div where you want your specified text displayed.

The HTML

[html] <select name="mySelect" id="mySelect">
<option selected="selected">Select…</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<div id="text_here"></div>
[/html]

Next add the following javascript.

The JavaScript

[javascript] $("#mySelect").change(function() {
// varible to hold string
var str = "";
$("select option:selected").each(function() {
str += $(this).text() + " ";
});
$("#text_here").text(str);
}).change();
[/javascript]

Give it a go via jsFiddle

Customize as needed and enjoy.