In summary the algorithm of your example says that:
For every click of the button whose attribute id="add_field"
:
Cancels the default event action.
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
.
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
.
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
.
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"
:
- Check if the variable
x
is greater than or equal to constant campos_max
- if larger abandons the function.
- Create and compose an element
<select>
, keep your reference in the variable select
.
- For each element of the array
cars
- Textually create and compose an element
<option>
and add it to the element <select>
newly created.
- Add the newly created element by reference
<select>
to the element whose id
is listas
.
- 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>
I changed my question to be easier to understand my problem. I also created an example with the problem I am facing
– Bruno