How to duplicate select without previous option

Question

How to duplicate select without previous option

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

The code below inserts a new select when clicking the button, but this new list should only consist of the remaining items, ie the new select can not have the option selected no 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><divclass="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 do you make sure that% "inserted"% does not appear in the previous%%?

html jquery

asked by anonymous 09.09.2017 / 01:28

2 answers

0

Two ways:

Keeping the option to enter:

$(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><divclass="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>

Exclude 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><divclass="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>

09.09.2017 / 01:39

how to solve the problem Task 'scripts' is not in your gulpfile Express Validator Custom - NodeJS

score 1 · Accepted Answer

Do as follows.

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><divclass="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

As the comment, this was a solution I found. You can have others 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><scriptsrc="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>