使用Ajax刷新Javascript下拉框

Question

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

Answer 1

使用JQuery的$.ajax函數根據ajax回調替換select中的<option>標記。 通過Ajax調用的腳本將簡單地返回<option>標記，可以直接將其加載到<select>

看看JQuery的$ .ajax方法。

http://api.jquery.com/jQuery.ajax/

Answer 2

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