Change option of select according to the option selected in another select

Question

Change option of select according to the option selected in another select

Navigation

#1 by (0 votes)

0

The problem: In a page I have two select, one that selects the team and another the team members, the first (of the team) I fill the option with php (by query in the database), so he will list all the teams I have registered in the database. I want you to change the team in this select , so that it loads select all members of this team (also recorded in the database).

I thought of doing with Jquery and Ajax , no change of select.equipe he requests on a php page, which searches for members related to the id of the selected team. But I'm having trouble getting the php return, because it will be more than one member.

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

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

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

Sorry for the bad formatting, it's urgent and I'm on my cell phone.

html jquery ajax

asked by anonymous 22.02.2016 / 05:10

1 answer

How to execute a method at the end of the section? [duplicate] Doubt with for command in sql server 2008

score 0 · Accepted Answer

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

Unfortunately, I'm not a PHP connoisseur, but having a brief Google query, I've got this example:

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

Now supposing that its $membros object is a Array of objects whose class has the properties Id and Nome , in this case we have an output similar 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 make 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>