AJAX通过无序列表(下拉菜单） - AJAX via Unordered List (Dropdown menu)

AJAX via Unordered List (Dropdown menu)

本文关键字：下拉菜单列表无序 AJAX | 更新日期: 2023-09-27

我想知道我是否可以在不使用forms/select的情况下将值传输到我的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>

考虑使用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);
});