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

Question

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

它允许我选择如下选项。假设选择了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来解决这个问题？或者怎么样？

由于

Answer 1

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

您需要做的是确保在提交表单时，HTTP请求包含每个选择框中的值。您可以通过两种方式执行此操作：

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

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

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

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

Answer 2

HTML

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

JS

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

    return true;
}

Answer 3

是的，确定你能做到： 使用

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

祝你好运