Javascript 确保选择了多个“选择图元”选项_Javascript_Jquery

Javascript 确保选择了多个“选择图元”选项

javascript jquery

Javascript 确保选择了多个“选择图元”选项,javascript,jquery,Javascript,Jquery,我有一个表，它是由一个包含X行的循环创建的。每行有一个select。我想在每个select中循环，如果任何select没有选择值，则完全停止该函数，不提交表单。现在的问题是，如果一行有一个选定值，而两行没有，它将提交这一行，但我需要它不提交，除非所有行都有一个选定值下面是一个JSFIDLE，其中有一个问题示例代码函数保存（）{ 让顺序=[]； $（'select[name=“statusSelect[]”）。每个（函数（）{ 设id=this[this.selectedIndex].id

我有一个表，它是由一个包含X行的循环创建的。每行有一个select。我想在每个select中循环，如果任何select没有选择值，则完全停止该函数，不提交表单。现在的问题是，如果一行有一个选定值，而两行没有，它将提交这一行，但我需要它不提交，除非所有行都有一个选定值

下面是一个JSFIDLE，其中有一个问题示例

代码

函数保存（）{
让顺序=[]；
$（'select[name=“statusSelect[]”）。每个（函数（）{
设id=this[this.selectedIndex].id；
设value=this.value；
如果（值=='empty'）{
控制台日志（“空”）；
$（“.alertEmptySelect”）.show（）；
返回；
}
push（{id:id，status:value}）；
让data=JSON.stringify（order）；
$.ajax({
方法：'放'，
url:“”，
数据：数据，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
async:false，
成功：功能（响应）{
$（“.alertSubmitted”）.show（“慢”）；
},
错误：函数（数据）{
控制台日志（数据）；
让errorString=''；
$.each（data.responseJSON，函数（键，值）{
errorString+=''+value+''；
});
$（'.alertError'）.show（）.html（errorString）；
}
});
});
}


请选择。。。
id}}value=“a”>a
id}}value=“r”>r

您可以在每个循环之前添加检查

var hasEmptySelect = $('select[name="statusSelect[]"]')
   .map((idx, elem) => elem.value)
   .filter(value => value === "empty")
   .length > 0;

因此，你以：

function save() {

    let order = [];

    var hasEmptySelect = $('select[name="statusSelect[]"]')
       .map((idx, elem) => elem.value)
       .filter(value => value === "empty")
       .length > 0;

    if (hasEmptySelect) {
        return;
    }

    // The rest of your code
}

您可以为ajax调用创建一个单独的函数，并且仅当您的

order.length===$（'select'）.length

表示所有选择都已选中时才调用该函数

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");
      alert('empty');
      $(".alertEmptySelect").show();
      return;
    }

    alert('Saving...');

    // else continue if all selects have a value 
    order.push({
      id: id,
      status: value
    });
    if(order.length === $('select').length)
       saveValues(JSON.stringify(order));
  });

  function saveValues(data){
  $.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 += '<li>' + value + '</li>';
        });
        $('.alertError').show().html(errorString);
      }
    });
  }
}

函数保存（）{
让顺序=[]；
$（'select[name=“statusSelect[]”）。每个（函数（）{
设id=this[this.selectedIndex].id；
设value=this.value；
//如果选择任何一个值==='empty'中断
如果（值=='empty'）{
控制台日志（“空”）；
警报（“空”）；
$（“.alertEmptySelect”）.show（）；
返回；
}
警报（'保存…'）；
//否则，如果所有选择都有值，则继续
命令。推({
id:id，
状态：值
});
if（order.length==$（'select'）.length）
saveValues（JSON.stringify（order））；
});
函数保存值（数据）{
$.ajax({
方法：'放'，
url:“”，
数据：数据，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
async:false，
成功：功能（响应）{
$（“.alertSubmitted”）.show（“慢”）；
},
错误：函数（数据）{
控制台日志（数据）；
让errorString=''；
$.each（data.responseJSON，函数（键，值）{
errorString+=''+value+''；
});
$（'.alertError'）.show（）.html（errorString）；
}
});
}
}

首先解释：我建议在循环外保留一个变量，比如var flag=0。然后，仅当循环满足您的条件时，才在循环的每次迭代中将该标志值增加1，即；为该行的select元素选择了一个选项

循环完成所有迭代后，检查flag变量的值是否等于循环的迭代次数。也就是说，如果总共有5个select元素，当循环完成时，如果每个select元素都有用户选择的选项/值，则flag的值将为5。然后只有您提交表单/调用ajax函数。下面是有效的代码。我正在使用jquery：

<!DOCTYPE html>
    <html>
    <body>
    <select name="statusSelect[]" id="statusSelect" onchange="changeColor(this, 123)" class="form-control" required>
      <option value="empty" disabled selected hidden>Please Choose...</option>
      <option id="123" value="a">A</option>
      <option id="456" value="r">R</option>
    </select>
    <select name="statusSelect[]" id="statusSelect"  class="form-control" required>
      <option value="empty" disabled selected hidden>Please Choose...</option>
      <option id="123" value="a">A</option>
      <option id="456" value="r">R</option>
    </select>
    <select name="statusSelect[]" id="statusSelect" class="form-control" required>
      <option value="empty" disabled selected hidden>Please Choose...</option>
      <option id="123" value="a">A</option>
      <option id="456" value="r">R</option>
    </select>
    <select name="statusSelect[]" id="statusSelect"  class="form-control" required>
      <option value="empty" disabled selected hidden>Please Choose...</option>
      <option id="123" value="a">A</option>
      <option id="456" value="r">R</option>
    </select>
    <button>
    Save
    </button>

    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>
    <script>
    $(document).ready(function(){
    $('button').click(function(){
      let flag = 0, rows = 0;
      let order = [];

      $('select[name="statusSelect[]"]').each(function() {
        rows = rows + 1;
        let id = this[this.selectedIndex].id;
        let value = this.value;

        // if any of the selects values === 'empty' break 
        if (value === 'empty') {
          console.log("empty");
          alert('empty');
          $(".alertEmptySelect").show();
          return;
        }

        else //since a value was selected, increase flat by 1 and add order to array that will be used in ajax function as data
        {
          flag =  flag + 1;
          order.push({
            id: id,
            status: value
          });
        }
      });    //end of loop


      //now check if flag variable = total number of iterations/rows
        if(flag == rows)
        {   //call ajax and etc. etc.
         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 += '<li>' + value + '</li>';
              });
              $('.alertError').show().html(errorString);
            }
          });
        } 

        // else if flag != row, show alert to user
        else alert('select all options');

      });
     }); 
    </script>
    </body>
    </html>


请选择。。。
A.
R
请选择。。。
A.
R
请选择。。。
A.
R
请选择。。。
A.
R
拯救
$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
设flag=0，rows=0；
让顺序=[]；
$（'select[name=“statusSelect[]”）。每个（函数（）{
行=行+1；
设id=this[this.selectedIndex].id；
设value=this.value；
//如果选择任何一个值==='empty'中断
如果（值=='empty'）{
控制台日志（“空”）；
警报（“空”）；
$（“.alertEmptySelect”）.show（）；
返回；
}
else//由于选择了一个值，所以将该值平铺增加1，并将顺序添加到将在ajax函数中用作数据的数组中
{
flag=flag+1；
命令。推({
id:id，
状态：值
});
}
})；//循环结束
//现在检查标志变量是否=总迭代次数/行数
如果（标志==行）
{//调用ajax等。
让data=JSON.stringify（order）；
$.ajax({
方法：'放'，
url:“”，
数据：数据，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
async:false，
成功：功能（响应）{
$（“.alertSubmitted”）.show（“慢”）；
},
错误：函数（数据）{
控制台日志（数据）；
让errorString=''；
$.each（data.responseJSON，函数（键，值）{
errorString+=''+value+''；
});
$（'.alertError'）.show（）.html（errorString）；
}
});
} 
//否则，如果标志！=行，则向用户显示警报
else警报（“选择所有选项”）；
});
});

HTML

文档中元素的id
应该是唯一的。链接JSFIDLE中的changeColor
定义在哪里？使用try-catch块怎么样？现在，break
语句只中断传递到$的函数；因此，您仍将在所有选择框中循环。您可以调用save（）
i