使用下拉菜单的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>

现在，这是我在网站页脚中的脚本，试图从下拉列表中每个项目的a href中提取内容。。。

$('#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位置信息中提取信息，这样信息就会改变，你就会得到位置信息。例如，这是modocom.ca/gillons/emo的页面，我想从location-div 中提取信息

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

因此，当有人点击Emo时，上面的HTML就是我试图拉到location-infodiv中的内容，然后当你从下拉菜单中选择不同的位置时，它会发生变化。

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

在与这个问题作斗争时，希望有人能伸出援手，似乎能让我不知所措。