Как добавлять атрибут disabled к тэгам option, если в предыдущих добавленных select уже выбран option с таким же value?

Question

[Enrage]

Есть таблица table, где в ячейках лежат select с option, к примеру, в каждом select 4 option.

Как можно реализовать, чтобы при клике на кнопку с классом .add_field, не только добавлялась строка с селектом, а чтобы еще и к новому добавленному селекту добавлялся атрибут disabled, или, допустим, удалялся тэг option из него, если в предыдущих селектах уже выбран option с таким value? (т.е., чтобы было так: допустим я добавил новый селект, выбрал в нем значение: Второй, потом добавил еще один селект, и значение Второй уже нельзя выбрать)

$(body).on('click', '.add_field', function(e) {
	e.preventDefault();
	$('table').append('<tr><td><select name="" class="fields">' +
    '<option value="first">Первый</option>' +
    '<option value="second">Второй</option>' +
    '<option value="third">Третий</option>' +
    '<option value="four">Четвертый</option>' +
		'</select></td></tr>');
});

Answer 1

[Anton Filippov]

Имейте какой-то массив options=[0,0,0,0], как только выбирается option, например второй, ставьте его в единицу, option[2-1] = 1, при создании нового селекта уже аппендите через options.map(), если единица то с disabled, иначе просто

Answer 2

[0xD34F]

const options = [ 'first', 'second', 'third', 'fourth' ];
const $table = $('table');

$('button').click(function() {
  $table.append(`
    <tr>
      <td>
        <select>
          <option disabled selected>-</option>
          ${options.map(n => `<option>${n}</option>`).join('')}
        </select>
      </td>
      <td>
        <button class="del">del</button>
      </td>
    </tr>
  `);

  updateDisabled();
});

$table
  .change(updateDisabled)
  .on('click', '.del', function() {
    $(this).closest('tr').remove();
    updateDisabled();
  });


function updateDisabled() {
  const $select = $table.find('select');
  const selectedOptions = $select.get().map(n => n.value);

  $select.find('option').prop('disabled', function() {
    return selectedOptions.includes(this.value);
  });
}