Clone select jquery / javascript

Question

Clone select jquery / javascript

Navigation

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

4

I'm a beginner, and I'm having trouble running this code I used from another topic from here ( Add and Remove fields with Javascript ).

Here he did not run, but in my localhost he even clones the requested snippet but does not just show select .

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

Please point out where I am making the mistake, or if you are missing something.

Thank you in advance.

$(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 removed all classes and it worked.

javascript html jquery select clone

asked by anonymous 21.09.2017 / 22:11

2 answers

2

Would that be it? the lack of jQuery ? If not, I did not understand what your problem was.

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

21.09.2017 / 22:15

How to update a DIV with Ajax / JS? [duplicate] Get data from another table in mysql and quantity

score 2 · Accepted Answer

NOTE: 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>

Youmaybemissingtheplacementorder,correctBiblioteca,JavaScripteHTML.

Theorderisasfollows:

<scriptsrc="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 snippet of the responses, as shown below, there is a reversal in the placement. JavaScript, Biblioteca e HTML

In this way, publishing the application to the server 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><divid="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>