Create fields dynamically in js

Question

I’m dynamically creating a select in jquery. When I create select, I query a database table to load the values in select.

Load the values correctly, but there is a problem. I’ll put an example of my code.

var cars = [
   {colour: "red", },
   {colour: "white", },
   {colour: "black", },
];

var campos_max = 10; 

var x = 0;
$('#add_field').click (function(e) {
e.preventDefault(); 

 if (x < campos_max) {
    $('#listas').append('<select class="form-control1 Reff" name="Ref[]"></select>');
 
}

var html = $('.Reff').html("");

cars.forEach(element => {
  html += `<option value="`+element.colour+`">`+element.colour+`</option>`;
    });
    
    $('.Reff').html(html);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="listas"></div>

<button type="button" id="add_field" class="btn btn-warning caixa"><span class="material-icons">add</span></button>

The problem is that I create the first select and select a value. Then when I create another select on the button remove the value I selected in the previous select and should not.

I should only return the query coming from the database in the select I am creating and not change the previous one.

Anyone can help?

Answer 1

In summary the algorithm of your example says that:

For every click of the button whose attribute id="add_field":

1. Cancels the default event action.

2. Make sure x is less than campos_max

   • if it is smaller, create and compose a text <select> and add it to the element whose id is listas.

3. To all page elements whose class is Reff delete its contents html("") and returns the content in html in variable html of the first element of the page whose class is Reff.

4. For each element of the array cars

   • create and compose a textually <option> and with element value.
   • concatenates the textual representation of this element <option> the content of the variable html.

5. To all page elements whose class is Reff replace its contents with the contents of the variable html.

It is possible to observe that:

• No justification for cancelling the event’s standard action click since the element <button> whose attribute type="button" has no standard behavior.

• The variable x will always have the value 0 in its code making useless the attempt to limit the number of elements created.

• All elements <selects> have the same attributes.

• Code repeatedly makes indiscriminate changes to page elements whose class is Reff not differentiating an already established element from a newly created one.

It is not possible to observe if:

• the variable cars whether or not its content will be altered at runtime by preventing the determination of whether the set of elements <options> will always be the same or will change during the running of the program. Preventing optimisation suggestions.

I propose based on the above findings the modification of the algorithm.

For every click of the button whose attribute id="add_field":

1. Check if the variable x is greater than or equal to constant campos_max
   • if larger abandons the function.
2. Create and compose an element <select>, keep your reference in the variable select.
3. For each element of the array cars
   • Textually create and compose an element <option> and add it to the element <select> newly created.
4. Add the newly created element by reference <select> to the element whose id is listas.
5. Increment the variable x.

Implementation of the above algorithm using the DOM:

var cars = [
   {colour: "red", },
   {colour: "white", },
   {colour: "black", },
];


const campos_max = 10;

let x = 0;
$('#add_field').click(function(e) {
  if (x >= campos_max) return;
  const select = document.createElement("select");
  select.classList.add("form-control1", "Reff");
  select.name = "Ref[]";
  cars.forEach(element => {
    const option = document.createElement("option");
    option.innerText = element.colour;
    option.value = element.colour;
    select.appendChild(option);
  });
  $("#listas").append(select);
  x++;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="listas"></div>

<button type="button" id="add_field" class="btn btn-warning caixa"><span class="material-icons">add</span></button>

Implementation of the above algorithm by constructing HTML element textual:

var cars = [
   {colour: "red", },
   {colour: "white", },
   {colour: "black", },
];


const campos_max = 10;

let x = 0;
$('#add_field').click(function(e) {
  if (x >= campos_max) return;
  const select = $($.parseHTML('<select class="form-control1 Reff" name="Ref[]"></select>'))[0];  
  cars.forEach(element => {
    const option = $($.parseHTML(`<option value="`+element.colour+`">`+element.colour+`</option>`))[0];
    select.appendChild(option);
  });
  $("#listas").append(select);
  x++;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="listas"></div>

<button type="button" id="add_field" class="btn btn-warning caixa"><span class="material-icons">add</span></button>

Answer 2

I hope this solves your problem, every time he recreated all the select, I used string template to add the variable x as identification class for each select so just add a new one without recreating the previous ones.

var cars = [
   {colour: "red", },
   {colour: "white", },
   {colour: "black", },
];

var campos_max = 10; 

var x = 0;
$('#add_field').click (function(e) {
e.preventDefault(); 

 if (x < campos_max) {
    $('#listas').append(`<select class="form-control1 Reff reff${x}" name="Ref[]"></select>`);
 
}

var html = $(`.reff${x}`);

cars.forEach(element => {
  html.append(`<option value="`+element.colour+`">`+element.colour+`</option>`);
    });
    
    //$('.Reff').html(html);
    x++;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="listas"></div>

<button type="button" id="add_field" class="btn btn-warning caixa"><span class="material-icons">add</span></button>