javascript - 在多选表单上，如果未选择任何选项，则在提交时选择所有选项

Question

使用 jQuery/Javascript，当用户单击“提交”时，我需要验证是否在选择表单上至少选择了一个选项，如果没有选择一个选项，我需要将它们全部提交。

所以在这样的表单上:

<form action="http://example.com" method="get" id="carfare" name="mycarform">
<select name="car" id="carchoice" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<input id="carsubmit" type="submit">
</form>

如果用户单击提交按钮而不选择任何选项，我需要它返回: http://example.com/?car=volvo&car=saab&car=opel&car=audi

Answer 1

首先，检查是否有通过do选择的项目

if(!$('#carchoice').val())

然后，将它们全部设置为

$('#carchoice option').prop("selected", true);

$('form').submit(function(){
   if(!$('#carchoice').val()){
     $('#carchoice option').prop("selected", true);
     }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="http://example.com" method="get" id="carfare" name="mycarform">
<select name="car" id="carchoice" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<input id="carsubmit" type="submit">
</form>