javascript - 将 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 返回包含的不仅仅是选择。尝试以下操作:

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

另见 this example .