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

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

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

html

我没有这个JSFIDLE，这里是一个屏幕截图，它在选择一个状态后做了什么，它复制了所有字段

---

显示high school（高中）下拉列表并保持所有其他字段不变而不重复的最佳方式是什么？

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

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

---

另请参见。

有几种方法可以解决此问题。首先，您可以简单地更改后端代码，只返回表单中不发送数据的部分。因此，如果发送状态，则只返回状态之后的字段。您还可以使其依赖于一个额外的参数，例如

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;
  });

});

---

ajax查询是否只返回选项标记中的高中？@Adam-我想它会返回整个网页。

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

$(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;
  });

});