Swap select option according to option selected in another select

Question

The Problem: On one page I have two select, one selecting the team and the other the team members, the first (team) I fill the option with php (per database query), so it will list all teams I have registered in the database. I want you to change the team on this select, for him to carry on select all members of this team (also recorded in the database).

I thought I’d do with Jquery and Ajax, in the change of select.equipe he perform a request on a php page, which searches for members related to the id of the selected team. But I’m having trouble catching the return of php, because there will be more than one member.

I tried to mount in php a string html with options and then give a append of that string in select.membros, but with no results.

I also tried with .html in place of .append. I searched several places and only found how to put option one by one, and does not solve my case as I have to put several at the same time, and the results of the query are mounted in options with values corresponding to the member id and content with the name of the member.

How do I add multiple options in select.membros and delete the same in .change of select.equipe? Or if you have a better method of doing this (changing the select.members options according to the select.team change) as I do?

Sorry for the bad formatting, it’s urgent and I’m by phone.

Answer 1

Ivcs, since you want to load the second select dynamically, it is interesting that the asyncrona call (AJAX) returns a JSON.

unfortunately I am not a PHP connoisseur, but doing a brief query on Google, I got this example:

$json_str = json_encode($membros);
echo "$json_str";

now supposing that its object $membros is a Array of objects whose class has properties Id and Nome, this case we will have a similar exit to the following:

[
  { "Id": 1, "Nome": "João" },
  { "Id": 3, "Nome": "Pedro" },
  { "Id": 5, "Nome": "Maria" },
  { "Id": 7, "Nome": "Ana" },
  { "Id": 11, "Nome": "Severino" }
];

so now we just need to carry out the AJAX call:

var json = document.getElementById("tmplJson").innerHTML;
var blob = new Blob([json], { type: 'application/json' });
var url = URL.createObjectURL(blob);

var membros = document.getElementById("membros");
var httpRequest = new XMLHttpRequest();
httpRequest.responseType = "json"
httpRequest.open("GET", url, true);
httpRequest.addEventListener("readystatechange", function (event) {
  if (httpRequest.readyState == 4) {
    if (httpRequest.status == 200) {
      membros.innerHTML = "";
      httpRequest.response.forEach(function (membro, indice) {
        var option = document.createElement("option");
        option.value = membro.Id;
        option.textContent = membro.Nome;
        membros.appendChild(option);
      });
    } else {
    
    }
  }
});

httpRequest.send();

<template id="tmplJson">
  [
    { "Id": 1, "Nome": "João" },
    { "Id": 3, "Nome": "Pedro" },
    { "Id": 5, "Nome": "Maria" },
    { "Id": 7, "Nome": "Ana" },
    { "Id": 11, "Nome": "Severino" }
  ]
</template>

<select id="membros">
</select>