Displaying selected option

Question

Attempting to get my page to display text, directly below the select box, based on what is selected in drop down. So far I have:

Choose one:</br>
<select name="book" id="book">
<option value="empty" selected disabled></option>
<option value="Book1">Book1</option>
<option value="Book2">Book2</option>
<option value="Book3">Book3</option>
<option value="Book4">Book4</option>
</select></br></br>

with script:

<script src="jquery.js"></script>
<script>
$('#book').change(function() {
  alert('You chose ' + $(this).text() + '.');
});
</script>

Problem is that obviously it creates an alert window which is not what I want, and also it displays the whole list and not just the selected item. What would I use in place of alert to display it directly beneath the select box? and why does it display the whole list instead of just the selected option? Thanks in advance for the knowledge.

Answer 1

On change, the selects value will be the selected option, so just insert the value after the select, preferable inside an element :

$('#book').on('change', function() {
    $('#result_element').text( this.value );
});

FIDDLE