在jQuery的选择元素中禁用一个选项

Question

我只想在已经使用jQuery选择了select元素的情况下禁用它的特定选项。

如果已经在一个行中选择了一个国家，则不能再次将其选择到其他行中，反之亦然。添加行时也应应用此功能。

我的问题是，即使在触发选择on change时添加了验证，它也无法正常工作，我仍然可以选择同一国家/地区。

请在下面查看我的代码。

$(document).ready(function() {

  $('.btn-add').on('click', function() {
    var lastRow = $('table tr.content:last').html();

    $('table').append('<tr class="content">' + lastRow + '</tr>');

    deleteRow();


    $('tr.content:last select.country').val("");


    $('select').each(function() {
      if ($(this).val() == $('select:selected').val()) {
        $(this).attr('disable');
        alert("Sorry, you cannot select the same country.");
        return false;
      }
    });
  });

  $('select.country').on('change', function() {
    $('select').each(function() {
      if ($(this).val() == $('select:selected').val()) {
        $(this).attr('disable');
        alert("Sorry, you cannot select the same country.");
        return false;
      }
    });
  });

  deleteRow();

  function deleteRow() {
    $('.btn-delete').on('click', function() {
      $(this).closest('tr').remove();
    });
  }

});

.btn-add,
.btn-delete {
  padding: 2px;
  cursor: pointer;
}

<table class="table">
  <thead>
    <tr>
      <th>Gender</th>
      <th>Country</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr class="content">
      <td>
        <select>
          <option class="Male">Male</option>
          <option class="Female">Female</option>
        </select>
      </td>
      <td>
        <select class="country">
          <option class="UK">UK</option>
          <option class="US">US</option>
          <option class="JP">JP</option>
        </select>
      </td>
      <td>
        <span class="btn-delete">Delete</span>
      </td>
    </tr>
  </tbody>
</table>

<br><br>
<span class="btn-add">Add</span>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

在选项元素中没有使用属性 class 。将其更改为 value 。您无需使用each()来禁用特定选项。取选定的上一个选项的值，以便您可以使用该值来标识设置disabled属性的正确选项。

您可以尝试以下操作：

$(document).ready(function() {

  $('.btn-add').on('click', function(e) {
    var prevVal = $('select.country').last().val();
    var lastRow = $('table tr.content:last').html();
    if(!prevVal){
      alert('Country not selected');
      return false;
    }
    $('select.country').trigger('change');
    $('table').append('<tr class="content">' + lastRow + '</tr>');
    $('tr.content:last select.country').val('');
    $('tr.content:last').find('option[value='+prevVal+']').attr('disabled', 'disabled');
    
  });

  $('select.country').on('change', function() {
    $('select').each(function() {
      if ($(this).val() == $('select:selected').val()) {
        $(this).attr('disable');
        alert("Sorry, you cannot select the same country.");
        return false;
      }
    });
  });
  
  $('body').on('click','.btn-delete', function() {
    if($('tbody>tr').length == 1)
      alert('Single row can not be deleted');
    else if($(this).closest('tr').is(":last-child"))
      $(this).closest('tr').remove();
    else
      alert('You are allowed to delete only the last row');
  });

});

.btn-add,
.btn-delete {
  padding: 2px;
  cursor: pointer;
}

<table class="table">
  <thead>
    <tr>
      <th>Gender</th>
      <th>Country</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr class="content">
      <td>
        <select>
          <option value="Male">Male</option>
          <option value="Female">Female</option>
        </select>
      </td>
      <td>
        <select class="country">
          <option value="UK">UK</option>
          <option value="US">US</option>
          <option value="JP">JP</option>
        </select>
      </td>
      <td>
        <span class="btn-delete">Delete</span>
      </td>
    </tr>
  </tbody>
</table>

<br><br>
<span class="btn-add">Add</span>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>