使用整个 DIV 作为带有 onchange 的按钮来刷新内容

Question

I don't know how to proceed and need your help!

The goal is to use multiple <DIV> :s as a list, the list items are listed from AJAX/SQL. When the user is clicking on one of the <DIV> :s it should change the "#main" <DIV> to view information about the specific <DIV> clicked in the list. Hope you're following.

Right now I've found a script and got it working by using <form> , <select> and <option> as seen in the script below.

But instead of this drop down list, <select> I want the <DIV> in the list to be the link, as <a> or simular so that the content of the "#main" <div> is changed without the whole page is refreshing and without the .

If you need any more info please let me know!

AJAX:

<script>
function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","getuser.php?q="+str,true);
        xmlhttp.send();
    }
}
</script>

HTML

<form>
  <select name="users" onchange="showUser(this.value)">
  <option value="">Select a person:</option>
  <option value="1">Peter Griffin</option>
  <option value="2">Lois Griffin</option>
  <option value="3">Joseph Swanson</option>
  <option value="4">Glenn Quagmire</option>
  </select>
</form>

<div id="txtHint"><b>Person info will be listed here...</b></div>

Answer 1

使用已发布但已删除的此答案，因此如果有人遇到相同的问题，这就是要走的路： ANSWER