2

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

在此处输入图像描述

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

谢谢

4

3 回答 3

5

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

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

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

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

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

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

于 2012-10-30T10:53:00.217 回答
1

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;
}
于 2012-10-30T10:52:14.890 回答
1

是的，你可以这样做：使用

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

祝你好运

于 2012-10-30T10:59:18.983 回答