I have a question about how to perform a particular function.
Iwouldlike,whenaparticularsupervisorwasselected,inthe"technician" box a list of technicians related to it is displayed.
Example: I selected the 3rd supervisor, as shown in the image. In the "technician" box should only appear the technicians related to it. If I select, for example, another supervisor. It would only appear the technicians related to it.
And so on.
I do not know if you were confused. Could someone give me a light?
You can use jQuery to make this filter, but you need to relate select "Supervisors" to select "Technicians". For this you can create a data-sup attribute in the option of select of "Technicians" by placing the related supervisor code. See:
$(document).ready(function(){
$("#supervisor").change(function(){
$("#tecnicos option")
.hide(); // Escondo todos os options
$("#tecnicos")
.find("option[data-sup='"+$(this).val()+"']")
.show() // mostro apenas os options relacionados ao valor do Supervisor escolhido
.first()
.prop("selected", true);
}).trigger("change");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectid="supervisor">
<option value="1">Super 1</option>
<option value="2">Super 2</option>
<option value="3">Super 3</option>
</select>
<br>
<select id="tecnicos">
<option data-sup="2" value="100">Téc 1</option>
<option data-sup="2" value="200">Téc 2</option>
<option data-sup="1" value="300">Téc 3</option>
<option data-sup="1" value="400">Téc 4</option>
<option data-sup="3" value="500">Téc 5</option>
<option data-sup="3" value="600">Téc 6</option>
</select> You can use the onchange() event to perform a function that filters the list of technicians according to the selected supervisor.
The onchange() event calls the alterado() function passing this which is itself select of the supervisors. Inside the function just get the value property and compare to get the right list.
Below is a basic example:
var supervisorList = ['Super1', 'Super2'];
var tecnicoList1 = ['Tecnico1', 'Tecnico11'];
var tecnicoList2 = ['Tecnico2', 'Tecnico22'];
var supervisorSelect = document.getElementById("supervisor");
var tecnicoSelect = document.getElementById("tecnico");
inicializa();
function inicializa() {
for (i = 0; i < supervisorList.length; i++) {
var c = document.createElement("option");
c.text = supervisorList[i];
supervisorSelect.options.add(c, 1);
}
for (i = 0; i < tecnicoList1.length; i++) {
var c = document.createElement("option");
c.text = tecnicoList1[i];
tecnicoSelect.options.add(c, 1);
}
}
function alterado(selectElement) {
var val = selectElement.value;
console.log(val);
if (val) {
limpaTecnicos();
if (val == 'Super1') {
for (i = 0; i < tecnicoList1.length; i++) {
var c = document.createElement("option");
c.text = tecnicoList1[i];
tecnicoSelect.options.add(c, 1);
}
}
if (val == 'Super2') {
for (i = 0; i < tecnicoList2.length; i++) {
var c = document.createElement("option");
c.text = tecnicoList2[i];
tecnicoSelect.options.add(c, 1);
}
}
}
}
function limpaTecnicos() {
for (i = tecnicoSelect.options.length - 1; i >= 0; i--) {
tecnicoSelect.options.remove(i);
}
}<p>
Supervisor:
<select id="supervisor" onchange="alterado(this)">
</select>
</p>
<p>
Técnico
<select id="tecnico"></select>
</p>