javascript - 如何使用onchange根据选择的值显示不同的信息？

Question

我创建了一个包含书籍名称的下拉列表。当从下拉列表中选择一本书名时，我希望它在同一页面中显示有关该书的信息。图书信息存储在mysql数据库中。我目前能够显示所有书籍的信息，但我希望能够对 php 页面上的信息进行排序。

我试图实现找到的答案 here ，但什么也没发生。

<select id="selected" name="selection" onchange="getselected(this)">
<option value="default">Select</option>
<option value="book1">Book Name 1</option>
<option value="book2">Book Name 2</option>
<option value="book3">Book Name 3</option>
<option value="book4">Book Name 4</option>
</select>

我的脚本是:

<script>
function getselected(sel) {
var bookname = sel.value;  
}
</script>

首先，如何在页面上显示所选的书名？例如，如果从下拉列表中选择“书名 1”，则会出现一行文本，显示“书名 1”。我尝试使用此脚本编写书名。

<script type="text/javascript">document.write(bookname);</script>

最终我想使用变量bookname来选择mysql数据库的信息。有多个条目具有相同的书名。 SELECT * WHERE 名称 = $书名

Answer 1

将以下 HTML 添加到您的页面

<div id="dynamic"></div>

将脚本更改为以下内容

<script>
function getselected(sel) { 
document.getElementById("dynamic").innerHTML = sel.options[sel.selectedIndex].text; 
}
</script>

希望这有帮助!