2

用户从下拉字段中选择一个州，然后 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 ，这是选择状态后的屏幕截图，它复制了所有字段。

在此处输入图像描述

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

4

2 回答 2

3

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

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

另请参阅此示例。

于 2012-04-09T17:31:23.730 回答
3

有几种方法可以解决此问题。首先，您可以简单地更改后端代码以仅返回您不为其发送数据的表单部分。所以如果你发送一个状态，只返回状态之后的字段。您还可以使其依赖于额外的参数，例如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;
  });

});
于 2012-04-09T17:32:31.347 回答