将div附加到网页 - 使用ajax发布数据

Question

用户从下拉字段中选择一个州，然后ajax将该值发布到数据库，以检索位于该州内的高中列表。

我还有其他字段要求他们的姓名和电子邮件地址。一旦用户选择了州，它就会检索相应的高中并显示这些高中的新下拉菜单，这里是我遇到问题的地方，它会复制其他字段：姓名和电子邮件。

HTML

<form>
<div id="inquiry-form">
  name:
  email:
  state drop-down field
</div>

<div id="high-schools">
  high school drop-down field
</div>

submit button
</form>

JS

$(document).ready(function() {

  $('#state').bind('change', function() {
    var form_data = {
      state : $('#state').val(),
      ajax : '1'
    };

    $.ajax({
      url: '/recruiter-card/index.php/inquiry/index',
      type: "POST",
      data: form_data,
      success: function(msg) {
        $("#high-schools").html(msg);
      }
    });
    return false;
  });

});

我没有这方面的jsfiddle，这里是选择状态后它做的截图，它复制了所有字段。

显示高中下拉菜单并保持所有其他字段完好无损的最佳方式是什么？没有重复？

Answer 1

我怀疑，ajax返回包含的不仅仅是select。请尝试以下方法：

...
  success: function(msg) {
    $("#high-schools").html($(msg).find('#high-schools').html());
  }
});
...

另见this example。

Answer 2

有几种方法可以解决这个问题。首先，您可以简单地将后端代码更改为仅返回您不发送数据的表单部分。因此，如果您发送状态，则只返回状态后的字段。您还可以使其依赖于额外的参数，例如ajax=1，因此您可以多种方式使用此相同的后端脚本。

另一种方法是使用jQuery去除你想要/不想要的字段部分：

$(document).ready(function() {

  $('#state').bind('change', function() {
    var form_data = {
      state : $('#state').val(),
      ajax : '1'
    };

    $.ajax({
      url: '/recruiter-card/index.php/inquiry/index',
      type: "POST",
      data: form_data,
      success: function(msg) {
        $("#high-schools").html($(msg).filter("#high-schools").html());
      }
    });
    return false;
  });

});