[AJAX] Deux select liés entre eux

Marsh Posté le 18-06-2006 à 17:57:02

Bonjour à tous,

Voila, je viens de suivre un joli tutorial sur toutjavascript.com en ce qui concerne AJAX. Interessé, j'ai voulu me lancer dans mon premier script; deux listes déroulantes liées entre elles.

J'ai réussi sans probleme (en suivant le tutorial).
Le probleme c'est que dans mon second select, ca me rempli le "value" comme le champs. C'est à dire (en HTML pur)

Code :

<option value="France">France</option>

Or je souhaiterai qu'il y ai l'id de la france dans value; comme ceci:

Code :

<option value="1">France</option>

J'ai donc bien sur modifier ma requete pour avoir le pays et l'id_pays. Mais il faut bien sur changer un peu le code, quelqu'un pourrait-il m'aider ?

Je copie-colle mon code javascript

Code :

<script type="text/javascript">
function request05(f) {
var l1 = f.elements["list1"];
var l2 = f.elements["list2"];
var index = l1.selectedIndex;
if(index < 1)
l2.options.length = 0;
else {
var xhr_object = null;
if(window.XMLHttpRequest) // Firefox
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
xhr_object = new ActiveXObject("Microsoft.XMLHTTP" );
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..." );
return;
}
xhr_object.open("POST", "req.php", true);
xhr_object.onreadystatechange = function anonymous() {
if(xhr_object.readyState == 4)
eval(xhr_object.responseText);
}
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded" );
var data = "family="+escape(l1.options[index].value)+"&form="+f.name+"&select=list2";
xhr_object.send(data);
}
}
</script>
------------------
<select name="list2">
</select>

ET la page PHP:

Code :

header('Content-type: text/html; charset=iso-8859-1');
include('./../config/config.php');
connexion();
$query = "SELECT appellation FROM cavisteonline_appellation WHERE id_typeappellation = '".$_POST["family"]."'";
$result = mysql_query($query) or die('Erreur SQL : <br />'.$query);
echo 'var o = null;';
echo 'var s = document.forms["'.$_POST["form"].'"].elements["'.$_POST["select"].'"];';
echo 's.options.length = 0;';
while($r = mysql_fetch_array($result))
echo 's.options[s.options.length] = new Option("'.$r["appellation"].'" );';

Merci de vos reponses.

Reply

Marsh Posté le 18-06-2006 à 17:57:02

Reply

Marsh Posté le 19-06-2006 à 08:11:55

Dans le script PHP,
au lieu de:
SELECT appellation FROM
tu mets:
SELECT id, appellation FROM

tu ajoute un export des IDs dans une array JS:

Code :

echo 'var opt_courante = new Option("'.addslashes($r['appellation']).'" );';
echo 'opt_courante.value='.$r['id'].';';
echo 's.options[s.options.length] = opt_courante;';

Message cité 1 fois

Reply

Marsh Posté le 19-06-2006 à 13:00:19

Merci beaucoup, je teste ce soir.
Merci encore

Reply

Marsh Posté le 19-06-2006 à 19:29:00

nargy a écrit :

Dans le script PHP,
au lieu de:
SELECT appellation FROM
tu mets:
SELECT id, appellation FROM

tu ajoute un export des IDs dans une array JS:

Code :

echo 'var opt_courante = new Option("'.addslashes($r['appellation']).'" );';
echo 'opt_courante.value='.$r['id'].';';
echo 's.options[s.options.length] = opt_courante;';

Super, merci ca marche impec, j'avais un peu trifouillé mais sans succès.

J'avoue cependant ne pas bien comprendre le bout de code.

Voila, merci encore

Reply

Marsh Posté le 19-06-2006 à 20:09:09

1ère ligne: créer l'option, par exemple 'Paris'
2ème ligne: affecter l'id de 'Paris' à la valeur de l'option, par exemple '75'
3ème ligne: ajouter l'option au select

équivalent HTML:

Code :

<select name="ville">
<option value="75">Paris</option>
</select>

Reply

[AJAX] Deux select liés entre eux

Sujets relatifs:

Leave a Replay