javascript - JQuery 在更改时提交选择字段，ajax 结果

Question

在我的 Rails 应用程序中，我在表单中有一个单独的选择字段。当字段更改时，我希望它提交表单，并远程检索结果。

这是我当前的代码(编辑 - 这部分有效，我正在尝试向其中添加更多内容):

$(function() {
  $("#statusFilter").live("change", function() {
    this.submit();
  });
});

在应用程序的不同部分，我有以下内容，对于超链接，单击时会远程返回链接。所以我希望上述表格具有相同的效果。

$(function() {
  $("#posts_container th a").live("click", function() {
    $.getScript(this.href);
    return false;
  });
});

这是它如何与搜索表单一起工作的另一个例子

  $("#dash_search input").keyup(function() {
    $.get($("#dash_search").attr("action"), $("#dash_search").serialize(), null, "script");
    return false;
  });

我尝试远程刷新的内容存在于 posts_container 中

Answer 1

如果您不使用表单来容纳任何其他表单元素，那么在这种情况下，我个人不会在选择字段周围使用表单。

从你所说的看来你正在努力实现以下目标:

1. 用户更改选择字段。
2. 然后使用选择字段中的新值来更新 posts_container 字段。

如果我猜对了，我会编写以下代码:

选择字段

<div>
    <select id="statusFilter">
        <option value="1">Option 1</option>
        <!-- Other options... -->
    </select>
</div>

JavaScript

<script type="text/javascript">
    $(document).ready(function() {
        $("#statusFilter").change(function() {
            // Possibly show an ajax loading image $("#ajax_loading").show();
            $("#posts_container").load("somepage.php", { value: $(this).val() }, function() {
                // Do something to say the data has loaded sucessfully
                // Possibly hide the ajax loading image $("#ajax_loading").hide();
            });
        });
    });
</script>

我不知道这是否有帮助或是否正确，但请告诉我，如果没有，我会尽力提供进一步帮助。