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

显示所选选项

1 个答案: