使用Ajax刷新Javascript下拉框

我有一个关于ajax的问题，我有一个类别下拉框和一些javascript，这样当用户选择一个类别时，它会自动将页面重定向到该类别，而无需单击提交按钮。我的问题很简单，我如何向这个过程中添加ajax来停止页面加载，只加载带有类别项的div

我使用的是表达式引擎cms，我知道这并不重要，但标记在代码中

这是我的代码：

<script language="JavaScript" type="text/javascript">
    var theTarget = "_top";
    function goThere() {
        if (!document.theForm.theMenu.selectedIndex=="") {
            window.open(document.theForm.theMenu.options[document.theForm.theMenu.selectedIndex].value, theTarget,"");
        }
    }
</script>

<form name="theForm" action="">
    <select name="theMenu" size="1" onchange="goThere()">
        {exp:channel:categories channel="store" style="linear" category_group="1"}
            <option value="{path='store-directory'}">{category_name}</option>
        {/exp:channel:categories}
    </select>
</form>

var theTarget=“_top”；
函数goThere（）{
如果（！document.theForm.theMenu.selectedIndex==“”）{
window.open（document.theForm.theMenu.options[document.theForm.theMenu.selectedIndex].value，目标“”；
}
}
{exp:channel:categories channel=“store”style=“linear”category\u group=“1”}
{类别名称}
{/exp:channel:categories}

使用JQuery的

$.ajax

函数替换基于ajax回调的select中的

标记。通过Ajax调用的脚本只需返回

标记即可直接加载到

看看JQuery中的$.ajax方法

函数转到此处（val）
{
$.post（val，函数（数据）{
$（“#categoryDiv”）.html（数据）；
});
}
{exp:channel:categories channel=“store”style=“linear”category\u group=“1”}
{类别名称}
{/exp:channel:categories}

您试过什么吗？如果是的话，问题是什么？我的问题是，我不精通ajax，如果有人能给我指出正确的方向，我将不胜感激。谢谢。对我的模板进行了一些调整！非常感谢你！

<script>function goThere(val)
{
    $.post(val, function(data) {
      $("#categoryDiv").html(data);
});
}</script>


<form name="theForm" action="">
<select name="theMenu" size="1" onchange="goThere(this.value)">
{exp:channel:categories channel="store" style="linear" category_group="1"}
<option value="{path='store-directory'}">{category_name}</option>
{/exp:channel:categories}
</select>
<div id="categoryDiv">
</div>
</form>