Javascript 使用下拉菜单使用Ajax动态内容

我想做的是，当你点击下拉菜单时，将另一个页面中的一个特定div加载到一个div中

这是我的下拉菜单代码，div location info是我希望将信息拉入的位置

<div class="nav-location">
    <ul>
        <li class="locationhead"><a href="#">Select Locations</a>
            <ul id="location-options">
                <li><a href="http://modocom.ca/gillons/atikokan/">Atikokan</a></li>
                <li><a href="http://modocom.ca/gillons/dryden/">Dryden</a></li>
                <li><a href="http://modocom.ca/gillons/emo/">Emo</a></li>
                <li><a href="http://modocom.ca/gillons/fort-frances/">Fort Frances</a></li>
                <li><a href="http://modocom.ca/gillons/rainy-river/">Rainy River</a></li>
                <li><a href="http://modocom.ca/gillons/red-lake/">Red Lake</a></li>
                <li><a href="http://modocom.ca/gillons/sioux-lookout/">Sioux Lookout</a></li>
                <li><a href="http://modocom.ca/gillons/thunder-bay/">Thunder Bay</a></li>
            </ul>
        </li>
    </ul>
</div>
<div id="location-info"></div>

我认为当你点击时，这会从下拉列表中的每个其他页面的div location info中提取信息，因此信息会发生变化，你会得到位置信息。例如，这是modocom.ca/gillons/emo页面，我想从location div中提取信息

当有人点击Emo时，上面的HTML就是我试图拉入location info div的内容，然后当你从下拉列表中选择不同的位置时，它就会改变

我用的是Wordpress，但这些东西都是硬编码的

---

与此抗争希望有人能伸出援助之手，似乎可以让我的头围绕着它。

我认为您的问题在于$'location-info'.htmlhtml；您正在从所选链接中提取整个网站内容，并将其填充到您的应用程序中。 相反，您应该只从html变量中获取。 这里也没有阻止正常的点击行为——它只是跟随链接。另外，$el.attr'href'不会返回带有链接的字符串，而是一个空对象，请自行检查

编辑： 我能够将“click”事件绑定到每个链接，因此它不跟随链接，而是在div中显示href，然后发出ajax请求

这是我的JSFIDLE示例：

Ajax请求失败，但在控制台中我可以看到这是由于代理407错误，访问被拒绝；但它应该在你的机器上工作。如果是这样，您仍然需要从返回的html中提取适当的div

---

干杯。

谢谢frikozoid，我该怎么办？对不起，我是ajax新手。@mbond我还不知道：。但与此同时，我发现点击的正常行为在这里并没有被阻止-它只是跟随链接…好吧，我试着在那里添加一些脚本，但现在它只是链接到页面，例如，当你点击Emo时，现在在下拉列表中，它打开了Emo页面，这不完全是我想要的lol，可能是现在向后，然后向前。我删除了我添加的脚本暂时无法正常工作，我添加的是….'$document.onclick、.nav location ul.location-options li，函数{var currentTarget=$this.finda.html；$.nav location.locationhead a.first.htmlcurrentTarget；}；'但它所做的只是使它从下拉链接刚刚打开，而不是你所知道的寻找。这比我想象的要困难得多lol@mbond看看我发布的链接，也许你会发现剩下的部分。你的脚本中有3个错误。请参阅我的答案和JSFIDLE示例中的编辑。

$('#location-options').on('click', 'a', function (event) {
    $el = $(event.target);
    $.ajax({
        type: 'GET',
        url: $el.attr('href'),
        success: function (html) {
            $('#location-info').html(html);
        }
    });

    return false;
});

<div id="location-info">
    <div class="sevencol">
        <h4>Gillons  | Emo</h4><p>74 Front St<br />Emo, ON P0W 1E0</p>
        <p>Phone: (807) 482-2146<br />Fax: (807) 482-2757</p>
    </div>
    <div class="fivecol last">
        <h4>Office Hours</h4><p>Monday-Friday<br />8:30am - 5:00pm</p>
    </div>
</div>