PHP - mise à Jour des valeurs dans la liste déroulante lors de la saisie de l'utilisateur

Vous avez deux solutions pour cela.

1. Faire entièrement en PHP (je ne le recommande pas car, ce n'est pas très user friendly)
2. Basé sur Ajax (Plus convivial)

Cependant à faire les choses de la bonne manière, vous avez besoin de support de Javascript

Donc, si je vous expliquer la solution. Une fois à l'utilisateur de changer votre première liste déroulante. Vous devez POSTER votre page à la même page à l'aide onChange() événement. Ensuite, dans votre page de définir les éléments de la deuxième liste déroulante même que vous avez fait pour la première liste déroulante.

La deuxième solution nécessite AJAX. Une fois à l'utilisateur de changer la première liste déroulante vous faire une requête AJAX sur une page. Dans cette page vous attrapez la sélection de l'utilisateur. Et, vous générez de la deuxième liste déroulante sur cette base. Ici, vous pouvez utiliser trois méthodes pour obtenir la deuxième liste déroulante, ou de ses données.

un. Vous générez le toutes les options de cette page et l'envoyer en arrière. Définir le innerHTML de la deuxième liste déroulante.

b. Obtenir les données en JSON et de remplir votre déroulant sur cette base.

c. Obtenez de l'AJAX XML et de remplir votre déroulant sur cette base.

L'affichage de la source à copier le code. JQuery a une façon de faire ce simple. J'ai utilisé un formulaire de créateur que j'ai faite sur mesure. Mais ici, c'est la sortie de la méthode manuelle.

Voici votre fichier ajax. Il va dans un JS ou l'en-tête.

    function getXMLObject()  //XML OBJECT
{
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  //For Old Microsoft Browsers
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  //For Microsoft IE 6.0+
}
catch (e2) {
xmlHttp = false   //No Browser accepts the XMLHTTP Object then false
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
}
return xmlHttp;  //Mandatory Statement returning the ajax object created
}
var xmlhttp = new getXMLObject();   //xmlhttp holds the ajax object
function makeAjaxRequest(url, params, output, image) {
var getdate = new Date();  //Used to prevent caching during ajax call
if( image == 1 ){
document.getElementById(output).innerHTML='<img src="./images/template/ajax-loader.gif"></img>'; 
}
if(xmlhttp) { 
xmlhttp.open("POST",url,true); //calling testing.php using POST method
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
document.getElementById(output).innerHTML=xmlhttp.responseText; //Update the HTML Form element 
}
else {
//         alert("Error during AJAX call. Please try again");
}
}    
}
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send(params); //Posting txtname to PHP File
}
}
function makeAjaxGetRequest(url, output, image) {
var getdate = new Date();  //Used to prevent caching during ajax call
if( image == 1 ){
document.getElementById(output).innerHTML='<img src="./images/template/ajax-loader.gif"></img>'; 
}
if(xmlhttp) { 
xmlhttp.open("GET",url,true); //calling testing.php using GET method
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
document.getElementById(output).innerHTML=xmlhttp.responseText; //Update the HTML Form element 
}
else {
//         alert("Error during AJAX call. Please try again.");
}
}    
}
xmlhttp.send(null); //Posting txtname to PHP File
}
}
function emptyAjaxReportBox(id)
{
document.getElementById(id).innerHTML= '';
}

Voici le fichier que l'utilisateur accède à:

//your call file; what you posted above.  Obviously change the names and Id's to match what you need.
<form  id="testFormId"  name="testForm"  action="post" >
<select  id="firstSelectId"  name="firstSelect"  onchange="makeAjaxRequest('url', 'firstSelect='+encodeURIComponent(document.getElementById('firstSelectId').value),'outputDivId', '0');" >
</select>
<div  id="outputDivId" >
<select name="secondInput">Whatever values you want to load up can go in here.  They can be the default values; meaning, if select 1 value = 0, then you have have these values in select 2.  Once you change select 1, this will disappear and be replaced by what your ajax returns.  Therefore, for easy processing after you submit the form, you should make this select 2 the same name and id as what you use in the ajax.</div>
</form>

Voici le fichier qui est appelé la requête ajax.

//your AJAX file needs to be a separate page than what you're currently reading.  Put whatever you want in there.
$db = connectioninfo;
$query;
echo 'What you put in the echo is what will show up in the outputDiv.  <select></select>';