AJAX via Liste non ordonnée (menu déroulant)

Question

Je veux savoir si je peux transférer une valeur à mon appel ajax/php, sans utiliser les formulaires/select. Peut-il être fait par un ul ou li?

Mon code:

<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> 

menu Select fonctionne, mais je veux un menu comme ceci: 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

Pensez à utiliser jQuery pour accélérer votre développement, mais en attendant vous pouvez utiliser quelque chose comme

<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> 

Ofcourse utilisant jQuery serait plus propre

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