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); 
});