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

Question

我不知道如何继续，需要你的帮助!

目标是使用多个 <DIV> :s 作为列表，列表项从 AJAX/SQL 中列出。当用户点击其中一个 <DIV> 时:s 它应该改变“#main”<DIV>查看有关特定 <DIV> 的信息在列表中单击。希望你关注。

现在我找到了一个脚本并通过使用 <form> 让它工作, <select>和 <option>如下面的脚本所示。

但不是这个下拉列表，<select>我想要 <DIV>在列表中作为链接，如<a>或类似的，以便“#main”的内容<div>没有整个页面刷新且没有 .

如果您需要更多信息，请告诉我!

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