选择多个提交问题 - 如果未选择，则 POST 为空答案

【问题标题】：Select multiple submit issue - POST is empty if not selected选择多个提交问题 - 如果未选择，则 POST 为空
【发布时间】：2012-10-19 16:35:36
【问题描述】：

我有一个多项选择，如下所示。

它允许我选择如下选项。假设选择了 3 项运动。

当项目如上图选择时，表单提交成功。

但不幸的是，如果在提交表单时没有像下面那样选择运动，则帖子为空。

选择框

<select style="width: 100px; height: 80px;" class="input" id="selected_sport_list" name="selected_sport_list[]" multiple="">
<option value="2">sport 2</option>
<option value="3">sport 3</option>
<option value="5">sport test x</option></select>

如何确保在提交表单时选择了特定项目？是否可以使用 jquery 来解决这个问题？还是怎么做？

谢谢

【问题讨论】：

一些代码比图片更有帮助
添加了代码。我添加了图片以便于理解

标签： jquery html forms post select

【解决方案1】：

HTML

<form onsubmit="return testSelects();"></form>

function testSelects() {
    if ( $('select').children(":selected").length == 0) {
       alert("Please select options before submiting the form!");
       return false;
    }

    return true;
}

【讨论】：

【解决方案2】：

这里的问题是浏览器不会提交来自每个选择框的值，除非用户首先“选中”它们。这是标准行为，您必须使用 JavaScript 解决问题。

您需要做的是确保在提交表单时，HTTP 请求包含每个选择框内的值。您可以通过两种方式做到这一点：

手动构造部分提交的数据并将其转发到服务器——例如通过将其作为查询字符串的一部分或将填充的数据对象传递给某个 jQuery AJAX 方法，或者
动态添加/删除隐藏的输入元素到表单以匹配选择框状态，以便在提交表单时这些输入元素包含所需的信息（在这种情况下，您应该小心覆盖用户确实也选择了一些选项；你不想重复输入！）

第一个选项涉及拦截表单提交并通过 JavaScript 提交您自己修改的请求。

第二个选项涉及向表单添加和删除元素，可以急切实现（拦截选择框之间的元素传输并使用隐藏元素立即镜像状态）或惰性实现（拦截表单提交并注入隐藏元素）动态元素）。

由于此时我们手头没有所有信息，您应该尝试从上面选择一种方法并提供您编写的一些相关代码。

【讨论】：

【解决方案3】：

是的，当然可以：使用

jQuery("#form").submit(function(){
 if(jQuery("select.input:selected").length == jQuery("select.input").length){
  // your actions if true
 } else {
  // your actions if false
 }
});

祝你好运

【讨论】：