1

Estou usando o plugin jQuery Repeater.

Preciso que, ao adicionar um novo item/linha, remova as opções já selecionadas no select ou que desabilite. Ex.:

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

Opção Selecionada: Valor X

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

Lembrando que a linha 2 (ou outras linhas) só aparecem quando eu clico em um botão "adicionar nova linha".

2 Respostas 2

1

Para remover as opções já selecionadas você pode usar o código dentro da função do 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 que o .remove() irá remover as opções anteriormente selecionadas:

Exemplo:

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

0

Você pode utilizar o callback show para fazer uma alteração antes de exibir o elemento repetido.

Nessa função de callback nós podemos utilizar o jquery.each para percorrer todos os selects já preenchidos, verificar o valor e remover do select que acabamos de repetir.

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

}

Segue exemplo:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .