确保选择了多个选择元素非空选项

我有一个下拉列表，默认选中的选项的值为empty 。 单击提交按钮后， save()调用save()函数，如果任何选择选择了“空”，则假定它显示警报并中断。 它显示警报但如果我为每个选择选择一个选项，它永远不会提交post。 我究竟做错了什么？

 function save() { let order = []; $('select[name="statusSelect[]"]').each(function(){ let id = this[this.selectedIndex].id; let value = this.value; // if any of the selects values === 'empty' break if (value === 'empty') { console.log("empty"); $(".alertEmptySelect").show(); return; // else continue if all selects have a value order.push({id: id, status: value}); let data = JSON.stringify(order); $.ajax({ method: 'put', url: '', data: data, contentType: "application/json; charset=utf-8", dataType: "json", async: false, success: function(response){ $(".alertSubmitted").show("slow"); }, error: function (data) { console.log(data); let errorString = ''; $.each(data.responseJSON, function (key, value) { errorString += '
' + value + '
'; }); $('.alertError').show().html(errorString); } }); } }); } 

我有一个由循环创建的表。 每一行都有自己的选择，这就是我将它声明为数组的原因

 id}})" class="form-control" required> Please Choose... id}} value="a">A id}} value="r">R  

Answer 1

首先，你需要从PUT更改为POST看看这里

其次，你不需要每次有效选择去服务器，但你应该做的是收集你的数据然后如果所有有效的去做ajax请求，那么你的函数应该是这样的：

  function save() { let order = []; //as you have many selects you need this flag to cancel ajax request if any select is empyt let isEmpty = false; $('select[name="statusSelect[]"]').each(function() { let id = this[this.selectedIndex].id; let value = this.value; debugger; // if any of the selects values === 'empty' break the each //and set the flag to beak the ajax request if (value === 'empty') { console.log("empty"); $(".alertEmptySelect").show(); isEmpty = true; return; } // order array must be in the each loop to carry all the data order.push({ id: id, status: value }); }); if (isEmpty) { console.log("save canceled"); return; } let data = JSON.stringify(order); console.log(data); //should be outside the each to go only one time to the sever (make sure to put the Url) $.ajax({ method: 'post', url: 'your Url', data: data, contentType: "application/json; charset=utf-8", dataType: "json", async: false, success: function(response) { console.log('success.'); $(".alertSubmitted").show("slow"); }, error: function(data) { console.log('error'); console.log(data); let errorString = ''; $.each(data.responseJSON, function(key, value) { errorString += '
' + value + '
'; }); $('.alertError').show().html(errorString); } }); } 

Answer 2

看起来你只是忘了关闭空值条件：

 function save() { let order = []; $('select[name="statusSelect[]"]').each(function() { let id = this[this.selectedIndex].id; let value = this.value; // if any of the selects values === 'empty' break if (value === 'empty') { console.log("empty"); $(".alertEmptySelect").show(); return; } // else continue if all selects have a value order.push({id: id, status: value}); let data = JSON.stringify(order); $.ajax({ method: 'put', url: '', data: data, contentType: "application/json; charset=utf-8", dataType: "json", async: false, success: function(response){ $(".alertSubmitted").show("slow"); }, error: function (data) { console.log(data); let errorString = ''; $.each(data.responseJSON, function (key, value) { errorString += '
' + value + '
'; }); $('.alertError').show().html(errorString); } }); }); } 

Answer 3

同意@twmulloy，花括号问题。

在所有下拉列表中validation没有空选择：

  // all dropdowns var allDropdowns = $('select[name="statusSelect[]"]'); // empty selected options var emptySelectedOptions = allDropdowns.find('[value=empty]:selected'); // flag if valid var isValid = (emptySelectedOptions.length === 0); if (!isValid){ // exit alert('Please select option from all!'); return; } 

重用所有下拉列表以迭代每个下拉列表： allDropdowns.each

JsFiddle和保存function的整体代码：

 function save() { let order = []; // all dropdowns var allDropdowns = $('select[name="statusSelect[]"]'), // empty selected options emptySelectedOptions = allDropdowns.find('[value=empty]:selected'), // flag if valid isValid = (emptySelectedOptions.length === 0); if (!isValid){ // exit alert('Please select option from all!'); return; } allDropdowns.each(function() { let id = this[this.selectedIndex].id; let value = this.value; alert('Saving...'); // else continue if all selects have a value order.push({ id: id, status: value }); let data = JSON.stringify(order); $.ajax({ method: 'put', url: '', data: data, contentType: "application/json; charset=utf-8", dataType: "json", async: false, success: function(response) { $(".alertSubmitted").show("slow"); }, error: function(data) { console.log(data); let errorString = ''; $.each(data.responseJSON, function(key, value) { errorString += '
' + value + '
'; }); $('.alertError').show().html(errorString); } }); }); }