Clone <select> jquery / javascript

Asked

Viewed 422 times

3

Guys, I’m a beginner and I’m having a hard time running this code I used from another topic right here (Add and Remove Fields with Javascript).

Here it did not run, but on my localhost it even clones the requested snippet, but not only shows select.

I confirm that the select is also cloned by "Inspect element" browser.

Please point out where I’m making the mistake, or if I’m missing something.

Grateful, from now on.

$(function() {
  var divContent = $('#materialInst');
  var botaoAdicionar = $('a[data-id="1"]');
  var i = 1;

  //Ao clicar em adicionar ele cria uma linha com novos campos
  $(botaoAdicionar).click(function() {
    $('<div class="conteudoIndividual"><div><input type="number" name="qitem0' + i + '" id="qitem0"><label for="qitem0">Quantidade</label></div><div><select id="item0" name="item0' + i + '"><option value="" disabled selected>Material</option><option value="1">item1</option><option value="2">item2</option><option value="3">item3</option></select></div><div><input disabled type="number" name="vitem0' + i + '" id="item0"><label for="vitem0">Valor unitário R$</label></div><div><input disabled type="number" name="vtitem0' + i + '" id="vtitem0"><label for="vtitem0">Valor total R$</label></div></div>').appendTo(divContent);
    $('#removehidden').remove();
    i++;
    $('<input type="hidden" name="quantidadeCampos" value="' + i + '" id="removehidden">').appendTo(divContent);
  });

  //Cliquando em remover a linha é eliminada
  $('#materialInst').on('click', '.linkRemover', function() {
    $(this).parents('.conteudoIndividual').remove();
    i--;
  });
});
<div id="materialInst">
  <div>
    <div>
      <input type="number" name="qitem0" id="qitem0">
      <label for="qitem0">Quantidade</label>
    </div>
    <div>
      <select id="item0" name="item0">
                <option value="" disabled selected>Material</option>
                <option value="1">item1</option>
                <option value="2">item2</option>
                <option value="3">item3</option>
        		</select>
    </div>
    <div>
      <input disabled type="number" name="vitem0" id="item0">
      <label for="vitem0">Valor unitário R$</label>
    </div>
    <div>
      <input disabled type="number" name="vtitem0" id="vtitem0">
      <label for="vtitem0">Valor total R$</label>
    </div>
  </div>
</div>
<a href="#" id="adicionar" data-id="1">Clonar</a>

Solution: It was the framework(materialize). I pulled out all the classes and it worked.

javascript jquery html select clone

3 answers

2

Would that be it? the lack of jQuery? If it’s not, I don’t understand what your problem is.

$(function() {
  var divContent = $('#materialInst');
  var botaoAdicionar = $('a[data-id="1"]');
  var i = 1;

  //Ao clicar em adicionar ele cria uma linha com novos campos
  $(botaoAdicionar).click(function() {
    $('<div class="conteudoIndividual"><div><input type="number" name="qitem0' + i + '" id="qitem0"><label for="qitem0">Quantidade</label></div><div><select id="item0" name="item0' + i + '"><option value="" disabled selected>Material</option><option value="1">item1</option><option value="2">item2</option><option value="3">item3</option></select></div><div><input disabled type="number" name="vitem0' + i + '" id="item0"><label for="vitem0">Valor unitário R$</label></div><div><input disabled type="number" name="vtitem0' + i + '" id="vtitem0"><label for="vtitem0">Valor total R$</label></div></div>').appendTo(divContent);
    $('#removehidden').remove();
    i++;
    $('<input type="hidden" name="quantidadeCampos" value="' + i + '" id="removehidden">').appendTo(divContent);
  });

  //Cliquando em remover a linha é eliminada
  $('#materialInst').on('click', '.linkRemover', function() {
    $(this).parents('.conteudoIndividual').remove();
    i--;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="materialInst">
  <div>
    <div>
      <input type="number" name="qitem0" id="qitem0">
      <label for="qitem0">Quantidade</label>
    </div>
    <div>
      <select id="item0" name="item0">
                <option value="" disabled selected>Material</option>
                <option value="1">item1</option>
                <option value="2">item2</option>
                <option value="3">item3</option>
        		</select>
    </div>
    <div>
      <input disabled type="number" name="vitem0" id="item0">
      <label for="vitem0">Valor unitário R$</label>
    </div>
    <div>
      <input disabled type="number" name="vtitem0" id="vtitem0">
      <label for="vtitem0">Valor total R$</label>
    </div>
  </div>
</div>
<a href="#" id="adicionar" data-id="1">Clonar</a>

  • Actually not @rafael. This was my fault, it was my first publication here, so I apologize. My question is about select, because on my host site it gets Hidden after cloning.

  • It was the framework(materialize). I removed all classes and it worked. Thank you!

2


OBS: included remove link.

If there is no missing jquery.min.js library

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

maybe I’m wrong in the placement order, correct Biblioteca, JavaScript e HTML.

The order is as follows: 

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

<script language="javascript">
<!--
$(function () {
    var divContent = $('#materialInst');
    var botaoAdicionar = $('a[data-id="1"]');
    var i = 1;

    //Ao clicar em adicionar ele cria uma linha com novos campos
    $(botaoAdicionar).click(function () {


        $('<div class="conteudoIndividual"><div><input type="number" name="qitem0' + i + '" id="qitem0"><label for="qitem0">Quantidade</label></div><div><select id="item0" name="item0' + i + '"><option value="" disabled selected>Material</option><option value="1">item1</option><option value="2">item2</option><option value="3">item3</option></select><a href="#" class="linkRemover"> Remover Campos</a></div><div><input disabled type="number" name="vitem0' + i + '" id="item0"><label for="vitem0">Valor unitário R$</label></div><div><input disabled type="number" name="vtitem0' + i + '" id="vtitem0"><label for="vtitem0">Valor total R$</label></div></div>').appendTo(divContent);

        $('#removehidden').remove();
        i++;
        $('<input type="hidden" name="quantidadeCampos" value="' + i + '" id="removehidden">').appendTo(divContent);
    });

    //Cliquando em remover a linha é eliminada
    $('#materialInst').on('click', '.linkRemover', function () {
        $(this).parents('.conteudoIndividual').remove();
        i--;
    });
});
//-->
</script>


<div id="materialInst">
  <div>
    <div>
      <input type="number" name="qitem0" id="qitem0">
      <label for="qitem0">Quantidade</label>
    </div>
    <div>
      <select id="item0" name="item0">
                <option value="" disabled selected>Material</option>
                <option value="1">item1</option>
                <option value="2">item2</option>
                <option value="3">item3</option>
                </select>
    </div>
    <div>
      <input disabled type="number" name="vitem0" id="item0">
      <label for="vitem0">Valor unitário R$</label>
    </div>
    <div>
      <input disabled type="number" name="vtitem0" id="vtitem0">
      <label for="vtitem0">Valor total R$</label>
    </div>
  </div>
</div>
<a href="#" id="adicionar" data-id="1">Clonar</a>

In the Javascript/HTML/CSS section of the answers, as shown below, there is an inversion in the placement. JavaScript, Biblioteca e HTML

thus, by posting the application on the server, it will not work!

	$(function () {
	    var divContent = $('#materialInst');
	    var botaoAdicionar = $('a[data-id="1"]');
	    var i = 1;
	
	    //Ao clicar em adicionar ele cria uma linha com novos campos
	    $(botaoAdicionar).click(function () {
	       
	    
	        $('<div class="conteudoIndividual"><div><input type="number" name="qitem0' + i + '" id="qitem0"><label for="qitem0">Quantidade</label></div><div><select id="item0" name="item0' + i + '"><option value="" disabled selected>Material</option><option value="1">item1</option><option value="2">item2</option><option value="3">item3</option></select><a href="#" class="linkRemover"> Remover Campos</a></div><div><input disabled type="number" name="vitem0' + i + '" id="item0"><label for="vitem0">Valor unitário R$</label></div><div><input disabled type="number" name="vtitem0' + i + '" id="vtitem0"><label for="vtitem0">Valor total R$</label></div></div>').appendTo(divContent);
	
	        $('#removehidden').remove();
	        i++;
	        $('<input type="hidden" name="quantidadeCampos" value="' + i + '" id="removehidden">').appendTo(divContent);
	    });
	
	    //Cliquando em remover a linha é eliminada
	    $('#materialInst').on('click', '.linkRemover', function () {
	        $(this).parents('.conteudoIndividual').remove();
	        i--;
	    });
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="materialInst">
	  <div>
	    <div>
	      <input type="number" name="qitem0" id="qitem0">
	      <label for="qitem0">Quantidade</label>
	    </div>
	    <div>
	      <select id="item0" name="item0">
	                <option value="" disabled selected>Material</option>
	                <option value="1">item1</option>
	                <option value="2">item2</option>
	                <option value="3">item3</option>
	        		</select>
	    </div>
	    <div>
	      <input disabled type="number" name="vitem0" id="item0">
	      <label for="vitem0">Valor unitário R$</label>
	    </div>
	    <div>
	      <input disabled type="number" name="vtitem0" id="vtitem0">
	      <label for="vtitem0">Valor total R$</label>
	    </div>
	  </div>
	</div>
	<a href="#" id="adicionar" data-id="1">Clonar</a>

  • Thanks for the fixes @Leo. I tested and in a test file, separate from the full form works correctly. Already inside the original file, it makes the select Hidden. I’m using a framework for customization, would that be interfering?

  • It was the framework(materialize). I removed all classes and it worked. Thank you!

1

I know the topic is old, but I think it is valid to leave another solution for those who need: I had this problem with the same code, so I looked for a solution that didn’t need to take the classes out of Materialize. Just put this: $('select').material_select(); after the appendTo line.

  • Thanks for sharing with us Bruno. I will test in a future opportunity.

Browser other questions tagged javascript jquery html select clone

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