显示警报消息后清除所选选项jQuery

Question

• 第一个选项是默认选项，因此会检索并比较其他选项中的选项文本。
• 现在，在显示警告消息后，我想清除在 2 号和 3 号中选择的选项，而不是默认的 1 号选项。

链接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;
            }
            }
        }
    }

Answer 1

使用此选择器时，您只需不要选择第一个选项元素：

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

删除它最易读的方法是使用not

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

但是使用slice 应该更快，因为它不适用于 DOM，它只会从数组中删除元素。

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

检查下面的sn-p：

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("");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Number</th>
      <th>Fruits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="num">1</td>
      <td>
        <select class="fruits">
          <option value="1">Apple</option>
          <option value="2">Banana</option>
          <option value="3">Orange</option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="num">2</td>
      <td>
        <select class="fruits">
          <option value=""></option>
          <option value="1">Apple</option>
          <option value="2">Banana</option>
          <option value="3">Orange</option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="num">3</td>
      <td>
        <select class="fruits">
          <option value=""></option>
          <option value="1">Apple</option>
          <option value="2">Banana</option>
          <option value="3">Orange</option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="num">4</td>
      <td>
        <select class="fruits">
          <option value=""></option>
          <option value="1">Apple</option>
          <option value="2">Banana</option>
          <option value="3">Orange</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>
<button onclick=check()>
  Submit
</button>

更新：仅清除 错误 字段。

要仅清除产生错误的字段，您可以将错误条件传递给clearFields() 函数并将其用于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("");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Number</th>
      <th>Fruits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="num">1</td>
      <td>
        <select class="fruits">
          <option value="1">Apple</option>
          <option value="2">Banana</option>
          <option value="3">Orange</option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="num">2</td>
      <td>
        <select class="fruits">
          <option value=""></option>
          <option value="1">Apple</option>
          <option value="2">Banana</option>
          <option value="3">Orange</option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="num">3</td>
      <td>
        <select class="fruits">
          <option value=""></option>
          <option value="1">Apple</option>
          <option value="2">Banana</option>
          <option value="3">Orange</option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="num">4</td>
      <td>
        <select class="fruits">
          <option value=""></option>
          <option value="1">Apple</option>
          <option value="2">Banana</option>
          <option value="3">Orange</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>
<button onclick=check()>
  Submit
</button>

Answer 2

为此，您可以像这样利用每个函数回调的index argument：

$("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;
        }
        }
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Number</th>
      <th>Fruits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="num">1</td>
      <td>
        <select class="fruits">
          <option value="1">Apple</option>
          <option value="2">Banana</option>
          <option value="3">Orange</option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="num">2</td>
      <td>
        <select class="fruits">
          <option value=""></option>
          <option value="1">Apple</option>
          <option value="2">Banana</option>
          <option value="3">Orange</option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="num">3</td>
      <td>
        <select class="fruits">
          <option value=""></option>
          <option value="1">Apple</option>
          <option value="2">Banana</option>
          <option value="3">Orange</option>
        </select>
      </td>
    </tr>
     <tr>
      <td class="num">4</td>
      <td>
        <select class="fruits">
          <option value=""></option>
          <option value="1">Apple</option>
          <option value="2">Banana</option>
          <option value="3">Orange</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>
<button onclick= check()>
  Submit
</button>