如何在不丢失表单输入的情况下刷新表单中的选择项（Django + jQuery）

Question

我有一个表单，里面有一个下拉列表。不过，用户可以通过点击旁边的按钮来注册一个新值（这个新值也会存入数据库）。

我通过AJAX的方法成功注册了这个新值。但是，我找不到办法来刷新下拉列表，这样用户才能选择刚刚插入的新值。

我试过用 location.reload(true)，但这样会清空表单里已有的输入内容。有没有办法只刷新下拉列表，或者在刷新时不丢失输入的内容呢？

我的JQuery代码是这样的：

$('#formSupplier').submit(function(e){
    $('#divProcessingMessage').show();
    $('#divSupplierForm').hide();
    $.post('/item/xhr_reg_supplier/',$('#formSupplier').serializeArray(),        
        function(data){
            if(data){
                alert('Supplier registration successful')
                $('#divProcessingMessage').hide();
                $('#divSupplierForm').show();

                //Clear the form's field
                $('#formSupplier').find(':input').each(function(){
                    switch(this.type) {
                        case 'password':
                        case 'select-multiple':
                        case 'select-one':
                        case 'text':
                        case 'textarea':
                            $(this).val('');
                            break;
                        case 'checkbox':
                        case 'radio':
                            this.checked = false;
                    } 
                });

                $('#supplier_form').hide();
                location.reload(true);
            } else {
                alert('Supplier registration failed')
            }        
        }
    );

顺便提一下，我使用的是django 1.3.1框架。

Answer 1

在处理AJAX请求的视图中，让它重新渲染表单字段并返回HTML代码。然后在JavaScript的回调函数中，用jQuery来替换掉原来的内容：$('select[name="thefield"]').replaceWith(data)。如果下拉框变化时有一些页面事件需要触发，你可能还需要重新绑定这些事件到新插入的DOM片段上。

Answer 2

有三种方法可以做到这一点：

document.getElementById('form_id').reset()

或者

$('#FormID').each (function(){
  this.reset();
});

或者

jQuery.fn.reset = function () {
  $(this).each (function() { this.reset(); });
}

$("#FormID").reset();