Jquery Repeater - Repeat values in select

Question

I’m using the plugin jQuery Repeater.

I need that by adding a new item/line, remove options already selected in select or that disable. Ex.:

Linha 1 - Opções: Valor X | Valor Y | Valor Z

Option Selected: X-value

Linha 2 - Opções: Valor Y | Valor Z

Remembering that line 2 (or other lines) only appear when I click on a button "add new line".

Answer 1

To remove the options already selected you can use the code within the function of show::

var $this = $(this);
var sels = $this.prevUntil("form.repeater").find("select option:selected");
sels.each(function(e,v){
   $this.find("select option[value='"+v.value+"']").remove();
});

Note that the .remove() will remove the options previously selected:

Example:

$(document).ready(function () {
  $('form.repeater').repeater({
      initEmpty: true,
      defaultValues: {
          'text-input': 'foo'
      },
      show: function () {
         var $this = $(this);
         $this.slideDown();
         var sels = $this.prevUntil("form.repeater").find("select option:selected");
         sels.each(function(e,v){
            $this.find("select option[value='"+v.value+"']").remove();
         });
      },
      hide: function (deleteElement) {
          if(confirm('Are you sure you want to delete this element?')) {
              $(this).slideUp(deleteElement);
          }
      },
  })
});

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

<form class="repeater">
    <div data-repeater-list="group-a">
      <div data-repeater-item>
        <input type="text" name="text-input" value="A"/>
        <select>
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
        </select>
        <select>
         <option value="4">4</option>
         <option value="5">5</option>
         <option value="6">6</option>
        </select>
        <input data-repeater-delete type="button" value="Delete"/>
      </div>
      <div data-repeater-item>
        <input type="text" name="text-input" value="B"/>
        <input data-repeater-delete type="button" value="Delete"/>
      </div>
    </div>
    <input data-repeater-create type="button" value="Add"/>
</form>

Answer 2

You can use the callback show to make a change before displaying the repeated element.

In this function of callback we can use the jquery.each to go through all the selects already filled, check the value and remove from the select which we have just repeated.

show: function() {

    /* Percorremos todos os selects visíveis */
    $("form select:visible").each( (i, el) => {

    /* Pegamos o valor do select e removemos do novo */
    $(this).find(`.sel option[value="${$(el).val()}"]`).remove()
    });

    /* Exibimos o select modificado para o usuário */
    $(this).slideDown();

}

Following example:

$(document).ready(function() {
  $('.repeater').repeater({
    repeaters: [{
      selector: '.inner-repeater'
    }],
    show: function() {

      $("form select:visible").each((i, el) => {
        $(this).find(`.sel option[value="${$(el).val()}"]`).remove()
        
        /* Bloqueia a alteração nos selects anteriores. (Opcional) */
        $(el).prop("disabled", true)
      });

      /* Caso haja opções disponíveis, exibe para o usúario */
      if ( $(this).find("option").length ) {
        $(this).slideDown();
      }
      /* Caso contrário, bloqueia o botão "add" */
      else {
        $(this).parents("form").find("[data-repeater-create]").prop("disabled", true);
        $(this).remove();
      }

    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<!-- outer repeater -->
<form class="repeater">
  <div data-repeater-list="outer-list">
    <div data-repeater-item>
      <!-- innner repeater -->
      <div class="inner-repeater">
        <div data-repeater-list="inner-list">
          <div data-repeater-item>
            <select class="sel">
              <option value="1" selected>Valor 1</option>
              <option value="2">Valor 2</option>
              <option value="3">Valor 3</option>
            </select>
            <input data-repeater-delete type="button" value="Delete" />
          </div>
        </div>
      </div>

    </div>
  </div>
  <input data-repeater-create type="button" value="Add" />
</form>