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

Question

I have a dropdown where the default selected option has a value of empty . After clicking the submit button the save() function is called where if any of the selects have 'empty' chosen its suppose to display an alert and break. It displays the alert but if I choose an option for each select it never submits the post. What am I doing wrong?

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

I have a table which is created by a loop. Each row has its own select which is why I have it declared as an array

<select name="statusSelect[]" id="statusSelect" onchange="changeColor(this, {{$product->id}})" class="form-control" required>
    <option value="empty" disabled selected hidden>Please Choose...</option>
    <option id={{$product->id}} value="a">A</option>
    <option id={{$product->id}} value="r">R</option>
</select>

Answer 1

First of all, You need to change from PUT to POST have a look Here

Second, you needn't go to the server with every valid select but what you should do is collect your data and then if all valid go do ajax request so your function should look like this:

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

Answer 2

It seems like you are simply forgetting to close your empty value condition:

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

Answer 3

Agree with @twmulloy, curly braces issue.

Validate no empty selection on all dropdowns:

  // 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;
  }

Reuse list of all dropdowns to iterate through each dropdowns: allDropdowns.each

JsFiddle and overall code for save 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 += '<li>' + value + '</li>';
        });
        $('.alertError').show().html(errorString);
      }
    });
  });
}