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

Question

I have created a drop down list with names of books. When a book name is selected from the drop down, I would like it to display information about the book in the same page. The book information is stored in a mysql database. I am currently able to display information for all books, but I would like to be able to sort through the information on a php page.

I attempted to implement the answer found here, but nothing happened.

<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>

My script is:

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

To start, how do I display the selected book name on the page? For example, if Book Name 1 was selected from the drop down, a single line of text will appear displaying Book Name 1. I attempted to write the book name with this script.

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

Eventually I would like to use the variable bookname to select the information the mysql database. There are multiple entries with the same book name. SELECT * WHERE name = $bookname

Answer 1

Add the following HTML to your page

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

change your script to the following

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

Hope this helps!