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

时间:2015-05-25 18:23:37

标签: javascript jquery forms multi-select

使用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

2 个答案:

答案 0 :(得分:1)

首先,检查是否通过执行

选择了任何项目
if(!$('#carchoice').val())

然后,将它们全部设置为

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

&#13;
&#13;
$('form').submit(function(){
   if(!$('#carchoice').val()){
     $('#carchoice option').prop("selected", true);
     }
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

在提交时检查是否选择了选项,如果没有选择全部。

$(document).ready( function () {
    $('#carefare').submit( function () {
        var choice = $('#carchoice').val();
        if(!choice) {
            $('#carchoice option').attr('selected','selected');
        }
    });
});

参考 jsfiddle 检查提交值的网络选项卡