Dropdown and Autocomplete

Question

I have a question about how to perform a certain function.

I would like that, when a certain supervisor is selected, in the "technical" box a list of the technicians related to it appears.

Example: I selected the 3rd supervisor, as shown in the image. In the "technical" box should appear only the technicians related to it. If I select, for example, another supervisor. It would appear only the technicians related to it.

And so on and so forth.

I don’t know if you got confused. Someone could give me a light?

Answer 1

You can use the event onchange() to perform a function that filters the list of technicians according to the selected supervisor.

The event onchange() calls the function alterado() passing by this which is the very select of supervisors. Within the function is only to take the property value and compare to get the right list.

Below 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>

Answer 2

You can use jQuery to make this filter, but you need to link the select "Supervisors" with the select "Technicians". For this you can create an attribute data-sup in option of select of the "Technicians" 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>
<select id="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>