下拉列表通过jquery ajax创建:如何在表单提交后保持用户的选择

Question

根据用户在第一个下拉菜单(dropdown1)中选择的内容填充下拉菜单(dropdown2)。Dropdown1包含合作伙伴列表，dropdown2填充属于该合作伙伴的人员列表。这是我的jquery代码下面(它的工作):

$("select[name='dropdown1']").change(function() {
$.ajax({
    type: "POST",
    url: "ajax/getPeoplebyPartner",
    data: "partnerId="+$("select[name='dropdown1']").val(),
    dataType: 'json',
    success: function(data){
        $("select[name='dropdown2']").empty();
        $("select[name='dropdown2']").append($("<option />").val("").text("select the person").attr('selected','selected').attr('disabled','disabled').attr('style','display:none;'));
        $.each(data, function() { //Filling each option
            $("select[name='dropdown2']").append($("<option />").val(this.id).text(this.name));
        });
    }
});
});
$("select[name='dropdown1']").change();

但是，如果用户提交了表单，但是在任何地方都有错误，则重新填充dropdown2，但是用户可能在那里设置的选项丢失了。我想解决这个问题。

我认为最好的办法是修改这部分:$("select[name='dropdown2']").append($("<option />").val(this.id).text(this.name));

成:if(this.id == WHAT THE USER HAD SELECTED BEFORE THE FORM WAS SUBMITTED) $("select[name='dropdown2']").append($("<option />").val(this.id).text(this.name).attr('selected','selected')); else $("select[name='dropdown2']").append($("<option />").val(this.id).text(this.name));

我怎样才能找到用户在提交表单之前选择了什么?

提前感谢!

Answer 1

您有两个选择:

1. 用户提交表单后-使用服务器端，您将需要分析POST标题的内容-或者如果您的表单使用GET，您将需要解析查询字符串(这是你也可以使用javascript做的事情)
2. 您验证您的表单没有'提交'操作，但通过使用Ajax调用。这个Ajax调用可以返回一个错误代码用户犯的错误，然后您可以更新用户界面因此。

我推荐第二种选择。这里有一个很好的例子:http://jqueryfordesigners.com/using-ajax-to-validate-forms/