显示选择的选项

Question

尝试让我的页面显示文本，直接在选择框下方，基于下拉列表中选择的内容。到目前为止，我有：

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>

带脚本：

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

问题是它显然会创建一个不是我想要的警报窗口，并且它还显示整个列表而不仅仅是选定的项目。我将使用什么来代替警报将其直接显示在选择框下方？为什么它显示整个列表而不是只显示选定的选项？提前感谢您的知识。

Answer 1

在更改时，选择值将成为选定选项，因此只需在选择之后插入值，最好在元素内：

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

FIDDLE