How To Run Multiple OnChange Events On Page

I've done extensive searching, but each example or explanation I come across is too different from my own, so it's ultimately no use. The problem is that I barely know anything when it comes to Javascript, but yet I'm trying to use it. I have a form on a page. This form contains 6 <select> elements, each with its own <option>Other</option> element. If something isn't listed, the user can choose "Other" and then type into a textbox which appears.

I have the following code, which works great if only applied to one <select> element.
<select name="How did you hear about us?" id="How did you hear about us?" onchange="makeBox1()">
<option value="0" selected="selected">-- Select --</option>
<option value="1">Search Engine</option>
<option value="2">Referral</option>
<option value="3">Trade Publication</option>
<option value="4">Vendor Web Site</option>
<option value="5">Your Company Website</option>
<option value="6">Direct Mail</option>
<option value="7">Other</option>
</select><div id = "inputBox1"></div>
<script type = "text/javascript">
function makeBox1() {
var a = "<input type = 'text' name = 'box1' id = 'box1' class='form popup'>"
if (document.getElementById("How did you hear about us?").value==7) {
document.getElementById("inputBox1").innerHTML = a;
} else {
document.getElementById("inputBox1").innerHTML = "";
}}
</script>

I've read that you have to combine onchange events, but I have no idea how to do this (I've done plenty of trial and error, trying to make every item unique, but to no avail.