使用 AJAX 动态填充的选择框不会在表单提交时发布

Posted 2023-05-07

【中文标题】使用 AJAX 动态填充的选择框不会在表单提交时发布

【英文标题】：Select box populated dynamically with AJAX doesn't post on form submission

【发布时间】：2011-10-09 00:31:33

【问题描述】：

这是我第一次尝试使用 ajax 在 Web 表单中链接选择框，我显然遗漏了一些东西。我完全不知道那是什么。这是我的问题：

用户从一个选择框中选择一个国家，然后发出一个 ajax 请求，并将选项（包含州和地区的名称）返回到下面的选择框中。 虽然选项返回到表单选择字段，但提交表单时不会发送用户选择的选项。

这是我编写的代码：

<script type="text/javascript">
    jQuery(document).ready(function($)
      $("select#state").attr("disabled","disabled");
      $("select#country").change(function()
        $("select#state").attr("disabled","disabled");
        $("select#state").html("<option>Loading States...</option>");
        var id = $("select#country option:selected").attr('value');
          $.post("http://example.com/terms.php", id:id, function(data)
            $("select#state").removeAttr("disabled");
            $("select#state").html(data);
          );
        );
    );
</script>

您可以在此处查看实时示例（请参阅国家/州部分）：

http://shredtopia.com/add/

有什么想法可以让这个工作正常吗？

【参考方案1】：

据我所知，用户输入已发送

input_32    79
input_29    alberta

79 国家 加拿大 和 阿尔伯塔 州。

<select tabindex="11" class="medium gfield_select" id="input_1_32" name="input_32"></select>
<select tabindex="12" class="medium gfield_select" id="input_1_29" name="input_29" disabled=""></select>

也许我误解了这个问题？

【讨论】：

表单未提交状态#input_1_29。它提交国家 #input_1_32（未填充 AJAX），但不提交州。

检查选择的name，name是input_32和input_29，不是 input_1_29 和 input_1_32，也许这就是问题所在。

不是，使用的是字段 ID，而不是名称。

当您发送表单时，名称将用作键，您可以查看here

【参考方案2】：

试试 .live( eventType,handler )

描述：将处理程序附加到与当前选择器匹配的所有元素的事件，现在和将来。

http://api.jquery.com/live/

添加到你的代码中试试看~

$('select#state').live('change', function() 
   var id = $("select#state option:selected").attr('value');
   alert(id);
);

---

或者试试这个：

添加一个隐藏的表单：

<input type="hidden" id="hiddenValue">

像这样改变你的 select#state：

<select onchange='innerValue(this.options[this.options.selectedIndex].value)'></select>

并创建一个javascript函数

function innerValue(value)
        $("#hiddenValue").val(value)
     

然后，点击提交按钮，$("#hiddenValue").val()是你需要的

$("#submitbutton").click(function()
            alert($("#hiddenValue").val())
        )

但是，我认为这不是最好的解决方案...

【讨论】：

修改词：“国家”=>“州”