AJAX 通过无序列表（下拉菜单）

Question

我想知道是否可以在不使用表单/选择的情况下将值传递给我的 ajax/php 调用。 可以通过 ul 或者 li 来完成吗？

我的代码：

<script>
function showUser(str)
{
    if (str=="")
    {
        document.getElementById("activities").innerHTML="";
        return;
    } 
    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 (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("activities").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","branch.php?q="+str,true);
    xmlhttp.send();
}
</script>
<nav class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-list"></i><span id="Branch">&nbsp;Activites</span></a>
    <ul class="dropdown-menu">
        <li>Option1</li>
        <li>Option2</li>
        <li>Option3</li>
        <li>Option4</li>
    </ul>
</nav>

选择菜单正在运行，但我想要这样的菜单：http://twitter.github.com/bootstrap/components.html#dropdowns

<select onchange="showUser(this.value)">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
</select>

Answer 1

考虑使用 jQuery 来加速你的开发，但在那之前你可以使用类似的东西

<ul id="myMenu">
  <li>content</li>
  ...
</ul>

<script>
document.getElementById('myMenu').addEventListener('click', function(event) {
  if ('li' != event.target.tagName) {
    return;
  }

  var str = event.target.innerText;
  showUser(str);
}, false);
</script>

当然使用 jQuery 会更整洁

$("#myMenu > li").click(function (ev) {
  var str = $(this).html();
  showUser(str);
});