Disable an option in select element in jquery

Question

I just want to disable a specific option within select element when it is already selected using jQuery.

If a country is already selected in a row, you cannot select it again to different rows, and vice versa. This functionality should also be applied when adding rows.

My problem is even if I added the validation when select on change triggered, it is not working, I still can choose the same country.

Please see my code below.

$(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>

Mamun · Answer 1 · 2018-11-12T06:53:29.520

There is no use of the attribute class used in the option element. Change that to value. You do not need to use each() to disable specific option. Take the value of previous option selected so that you can use that value to identify the right option to set the disabled property.

You can try the following:

$(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>

This would be nice, but if you try to select all the three, then delete one, you cannot select it again; one of the country should be available if you delete one of them. — Blues Clues, Oct 23 '18 at 02:43
@Jonjie, you are right, didn't notice that. I have updated the the answer by removing the `disabled` attribute from the current select options on clicking the delete button.......please check....thanks. — Mamun, Oct 23 '18 at 04:00
Hi Mamun. Still has a bug. Try to add 2 rows (total of 3 rows), then delete the 2nd row, then 1 row add again, then select country. — Blues Clues, Oct 24 '18 at 00:28
@Jonjie, that is because those rows were created before deleting some rows from the middle. To solve the issue, you can disable all the delete button except the last one.....this will allow to delete only the last row. Or you can delete all the rows after the currently deleted row........thanks. — Mamun, Oct 24 '18 at 05:18
You might want to update your answer so we can see the result :) — Blues Clues, Oct 24 '18 at 07:41
@Jonjie, I have updated the answer so that only the last row can be deleted now.....thanks :) — Mamun, Nov 12 '18 at 06:45

Disable an option in select element in jquery

1 Answers1