clear the selected options after alert message is displayed jQuery

Question

First option is the default, so the text of the options from other options is retrieved and compared.
Now, after displaying an alert message, I want to clear the option selected in No 2 and 3 but not No. 1 which is the default.

Link https://jsfiddle.net/fswygznq/1/

 function check(){
        var $fruits = [];
        $("select.fruits").each(function() {
          var $two = $(this).find("option:selected").text();
          $fruits.push($two)
        })
        for ($i= 1; $i < $fruits.length; $i++) {
            for ($j= 0; $j < 5; $j++) {
            if ($fruits[$i] == "Apple" && $fruits[$i+$j] == "Banana") {
               alert ("Since you have selected Apple, you cannot select Banana");
              $("select.fruits").val(""); // this one clears all the options including the default**
              return false;
            }
            if ($fruits[$i] == "Banana" && $fruits[$i+$j] == "Apple") {
              alert ("Since you have selected Banana, you cannot select Apple");
               $("select.fruits").val(""); // this one clears all the options including the default
              return false;
            }
            }
        }
    }

user_2557030 · Answer

All you need to do is not select the first option element when using this selector:

$("select.fruits").val("");

The most readable way to remove it would be to use not

$("select.fruits").not(':first').val("");

But using slice should be quicker because it does not work with the DOM, it only removes the element from the array.

$("select.fruits").slice(1).val("");

Check the snippet below:

function check() {
  var $fruits = [];
  $("select.fruits").each(function() {
    var $two = $(this).find("option:selected").text();
    $fruits.push($two)
  })
  for ($i = 0; $i < $fruits.length; $i++) {
    for ($j = 0; $j < 5; $j++) {
      if ($fruits[$i] == "Apple" && $fruits[$i + $j] == "Banana") {
        alert("Since you have selected Apple, you cannot select Banana");
        clearFields();
        return false;
      }
      if ($fruits[$i] == "Banana" && $fruits[$i + $j] == "Apple") {
        alert("Since you have selected Banana, you cannot select Apple");
        clearFields();
        return false;
      }
    }
  }
}

function clearFields() {
  $("select.fruits").slice(1).val("");
}

UPDATE: Clear only error fields.

To clear only the fields that produced the error you can pass the error condition to the clearFields() function and use it to filter

clearFields(condition) {
  $("select.fruits").slice(1)
    .filter(function() {
      return $(this).children('option:selected').text() === condition;
    }).val("");
}

function check() {
  var $fruits = [];
  $("select.fruits").each(function() {
    var $two = $(this).find("option:selected").text();
    $fruits.push($two)
  })
  for ($i = 0; $i < $fruits.length; $i++) {
    for ($j = 0; $j < 5; $j++) {
      if ($fruits[$i] == "Apple" && $fruits[$i + $j] == "Banana") {
        alert("Since you have selected Apple, you cannot select Banana");
        clearFields("Banana");
        return false;
      }
      if ($fruits[$i] == "Banana" && $fruits[$i + $j] == "Apple") {
        alert("Since you have selected Banana, you cannot select Apple");
        clearFields("Apple");
        return false;
      }
    }
  }
}

function clearFields(condition) {
  $("select.fruits").slice(1)
    .filter(function() {
      return $(this).children('option:selected').text() === condition;
    }).val("");
}

user_16208763 · Answer

For do that you can profit the index argument of each function callback like that:

$("select.fruits").each(function(index, element){
           
    index != 0 ? $(element).val("") : null;
             
});

function check(){
    var $fruits = [];
    $("select.fruits").each(function() {
      var $two = $(this).find("option:selected").text();
      $fruits.push($two)
    })
    for ($i= 1; $i < $fruits.length; $i++) {
        for ($j= 0; $j < 5; $j++) {
        if ($fruits[$i] == "Apple" && $fruits[$i+$j] == "Banana") {
           alert ("Since you have selected Apple, you cannot select Banana");
          $("select.fruits").each(function(index, element){
           
                index != 0 ? $(element).val("") : null;
             
           });
          return false;
        }
        if ($fruits[$i] == "Banana" && $fruits[$i+$j] == "Apple") {
          alert ("Since you have selected Banana, you cannot select Apple");
           $("select.fruits").each(function(index, element){
           
                index != 0 ? $(element).val("") : null;
             
           });
          return false;
        }
        }
    }
}

clear the selected options after alert message is displayed jQuery

2 Answers

UPDATE: Clear only error fields.