How to duplicate select without previous option

Question

How to duplicate select without previous option

Asked 8 years, 2 months ago

Viewed 308 times

1

The code below performs the insertion of a new select by clicking the button, but this new list should be composed only with the remaining items, ie the new select shall not possess the option selected in select previous.

$(document).ready(function(e) {
    $('#addComp').on('click', function(){
    	$('.itemComposicao').append($('.itemComposicao').children(":first").html());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="itemComposicao">
  <div class="form-group">
    <select class="composicao">
        <option value="1">Alumínio</option>
        <option value="2">Cobre</option>
        <option value="3">PVC</option>
    </select>
  </div>
</div>

<button type="button" id="addComp">Inserir</button>

Update:

Note: after duplicating this item, how to make the option "inserted" does not appear in selects previous?

2 answers

1

Do it this way.

Source: jquery remove/add select options after Cloning select list (soEN)

$(document).ready(function(e) {
    $('#addComp').on('click', function(){
      // Guarda primeiro item na variável "original"
      var original = $("#item_composicao:eq(0)");
      // Guarda todos os items na variável "todosSelectes"
      var todosSelects = $("select.composicao");
      // Clona o primeiro item
      var clone = original.clone();
      // Remove os items selecionados anteriormente.
      $('option', clone).filter(function(i) {
        return todosSelects.find('option:selected[value="' + $(this).val() + '"]').length;
      }).remove();
      // Verifica a quantidade de opções que tem o último select
      // Se for maior que 1, clona o elemento, caso for igual a 1
      // não faz nada.
      var ultimo = $("select.composicao:last option").size();
      if (ultimo > 1) {
        $('.itemComposicao').append(clone);
      }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="itemComposicao">
  <div class="form-group" id="item_composicao">
    <select class="composicao">
        <option value="1">Alumínio</option>
        <option value="2">Cobre</option>
        <option value="3">PVC</option>
    </select>
  </div>
</div>

<button type="button" id="addComp">Inserir</button>

Solution

According to the comment, this was a solution I found. There may be other more simplified.

$(document).ready(function(e) {
    var clone_index = 0;
    $('#addComp').on('click', function(){
      // Guarda primeiro item na variável "original"
      var original = $("#template");
      // Guarda todos os items na variável "todosSelectes"
      var todosSelects = $("select.composicao");
      // Clona o primeiro item
      var clone = original.clone();
      // Exibe na tela
      clone.css({'display': 'inline'});
      // incrementa
      clone_index++;
      // Define uma ID unica
      clone.find("#item_composicao select").attr('id', 'clone_' + clone_index);
      // Verifica se a quantidade de items clonados é menor do que a quantidade
      // de items no #template
      if (clone_index < ($("#template #item_composicao select option").length - 1)) {
        // Verifica se a opção selecionada não é: Seleciona uma Opção
        // Se não for continua, caso contrário exibe mensagem.
        if( clone_index !== 0 && $("#clone_" + (clone_index - 1)).val() === "") {
          // Descrementa.
          clone_index--;
          alert("SELECIONE UMA OPÇÃO");
        } else {
          // Remove o item selecionado anteriormente.
          clone.find("#item_composicao select").on("change", function() {
            todosSelects.find("option[value=" + $(this).val() + "]").remove();
          });
          // Verifica a quantidade de opções que tem o último select
          // Se for maior que 1, clona o elemento, caso for igual a 1
          // não faz nada.
          var ultimo = $("select.composicao:last option").size();
          if (ultimo > 1) {
            $('.itemComposicao').append(clone);
          }
          // Remove os items dos selects menos o item selecionado
          $(".itemComposicao select[id!='clone_"+clone_index+"']").find("option").not(":selected").remove();
        }
      }
    });
});

/* OCULTA A DIV #TEMPLATE */
.hidde {
  display: none;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- Modal composição -->
	<!-- Modal -->
	<div id="percent-composicao" class="modal fade" role="dialog">
	  <div class="modal-dialog">
	
		<!-- Modal content-->
		<div class="modal-content">
		  <div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h4 class="modal-title">Composição</h4>
		  </div>
		  <div class="modal-body">

		      <!-- COLOQUE ESSE CÓDIGO FORA DA TAG FORM -->
		      <div class="row hidde" style="margin-bottom: 35px;" id="template">
		          <div class="col-xs-12 col-sm-6" id="item_composicao">
		              <select name="composicao" id="composicao" required="true" class="form-control composicao">
                        <option value="">Selecione uma Opção</option>
                        <option value="1">Alumínio</option>
                        <option value="2">Cobre</option>
                        <option value="3">Madeira</option>
		              </select>
		          </div>
		          <div class="col-xs-12 col-sm-2" id="percent_comp">
		              <input class="form-control" name="percentComp" type="number"/>
		          </div>
		          <div class="col-xs-12 col-sm-2">
		              <button type="button" class="btn btn-danger" class="removeComp"><i class="fa fa-times" aria-hidden="true"></i></button>
		          </div>
		      </div>
		      <form method="post" id="formComposicao" enctype="multipart/form-data">
		          <!-- ESSE CÓDIGO  DENTRO DA TAG FORM -->
		          <div class="row itemComposicao"></div>
		      </form>
		  </div>
		  <div class="modal-footer">
			<button type="button" class="btn btn-primary" id="addComp">Adicionar</button>
			<button type="button" class="btn btn-success" data-dismiss="modal">Salvar</button>
		  </div>
		</div>
	
	  </div>
	</div><!--// Modal compo -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#percent-composicao">
  Abrir modal de Composição
</button>

With size() the following error has been made: Uncaught TypeError: $(...).size is not a function. However, when using the length worked perfectly.

– lucasbento

2017/09/09 at 04:23
Wellingthon, could you take a look at update?

– lucasbento

2017/09/09 at 04:31
@luccasrodrigo I will give a check, so have to remove from the others also what was selected in the last certain ?

– NoobSaibot

2017/09/09 at 05:10
Hello Wellingthon, we could continue this debate by chat?

– lucasbento

2017/09/09 at 16:10

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2017-09-08T23:39:59+00:00

Two ways:

Keeping the option to insert:

$(document).ready(function(e) {
   $('#addComp').on('click', function(){
      var valor_excluir = $('.composicao').last().val(); //pego o value selecionado
$('.itemComposicao').append($('.itemComposicao').children(":first").html());
     $('.composicao option[value='+valor_excluir+']').last().remove(); // removo o option com o value selecionado no select anterior
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="itemComposicao">
  <div class="form-group">
    <select class="composicao">
        <option value="1">Alumínio</option>
        <option value="2">Cobre</option>
        <option value="3">PVC</option>
    </select>
  </div>
</div>

<button type="button" id="addComp">Inserir</button>

Run out insert when all options are chosen:

$(document).ready(function(e) {
    $('#addComp').on('click', function(){
		if($('.composicao').length < $('.composicao:eq(0) option').length){
			$('.itemComposicao').append($('.itemComposicao').children(":first").html());
			for(x=0;x<$('.composicao').length-1;x++){
				var valor_excluir = $('.composicao:eq('+x+')').val();
				$('.composicao option[value='+valor_excluir+']').last().remove();
			}
		}else{
			alert("Todos as opções foram usadas!");
		}
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="itemComposicao">
  <div class="form-group">
    <select class="composicao">
        <option value="1">Alumínio</option>
        <option value="2">Cobre</option>
        <option value="3">PVC</option>
    </select>
  </div>
</div>

<button type="button" id="addComp">Inserir</button>