Discussion :

[tom1970]

Bonjour,

J'ai un pépin qui se doit s’être simple :
Je récupère les valeur de ma BDD pour faire un formulaire dynamique sur 3 niveaux, et cela fonctionne très bien (quand on sélectionne le niveau 1, le niveau 2 retourne les valeurs adéquates, et idem niveau 3)
Donc tout va bien ... sauf que je souhaite modifier le champ "text" de mon select de niveau 2 (category) en fonction de la value du champs option
en gros si value== "x", text == "mon nouveau texte"

Ci dessous mon JS qui marche très bien, je veux y ajouter une liste de valeur pour le document.getElementById('category').innerHTML = leselect; change a valeur du texte (et pas de la value) retournée par ma BDD

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
if (window.XMLHttpRequest) {
    oXmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    oXmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
function selectManufacturer(id) {
    document.getElementById('subcategory').innerHTML = "";
    oXmlhttp.open('POST', "recherche-listesderoulantes-resultats.php");
    oXmlhttp.onreadystatechange = function () {
        if (oXmlhttp.readyState == 4 && oXmlhttp.status == 200) {
            leselect = oXmlhttp.responseText;
            document.getElementById('category').innerHTML = leselect;
        }
    }
    oXmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    var data = 'q=m&id=' + id;
    oXmlhttp.send(data);
}
 
function selectCategory(manufacturer, category) {
    oXmlhttp.open('POST', "recherche-listesderoulantes-resultats.php");
    oXmlhttp.onreadystatechange = function () {
        if (oXmlhttp.readyState == 4 && oXmlhttp.status == 200) {
            leselect = oXmlhttp.responseText;
            document.getElementById('subcategory').innerHTML = leselect;
        }
    }
    oXmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    var data = 'q=c&manufacturer=' + manufacturer + '&id=' + category;
    oXmlhttp.send(data);
}

code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<form method="get" action="recherche-listesderoulantes-resultats.php">
    <select style="width: 80%" id="manufacturers_id" name="manufacturers_id" onchange="selectManufacturer(this.value);">
        <option value="-1">Choisissez</option>
        <option value="****">Marque 1</option>
        <option value="****">Marque 2</option>
         ...
    </select>
    <div id="category" style="display:inline">
        <select style="width: 80%" name="category" onchange="selectCategory(1743,this.value);">
            <option value="-1">-- Catégorie --</option>
            <option value="13508">Accessoires</option>
            <option value="13453">Accessoires 2</option>
            <option value="13622">Accessoires 3</option>
             .....
        </select>
    </div>
    <div id="subcategory" style="display:inline">
    </div>
</form>

Donc il faut que je remplace Accessoires 1 par Accessoire automobile
Accessoires 2 par Accessoires moto
etc ...

D'avance un grand merci car là je sèche !!!

[tom1970]

Cela était beaucoup plus simple qu'anticipé, en effet le select étant créé dynamiquement j'avais un doute mais il suffit de ces quelques lignes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var strMessage1 = document.getElementById("category") ;
strMessage1.innerHTML = strMessage1.innerHTML.replace( '<option value="13508">Accessoires','<option value="13508">Accessoires tototototot').replace( '<option value="13453">Accessoires','<option value="13453">Accessoires ggggggggggg') ;

Que je place après :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function selectManufacturer(id) {
	document.getElementById('subcategory').innerHTML = "";
 oXmlhttp.open('POST',"recherche-listesderoulantes-resultats.php");
 oXmlhttp.onreadystatechange=function() {
  if (oXmlhttp.readyState==4 && oXmlhttp.status == 200) {
  	leselect = oXmlhttp.responseText;
	document.getElementById('category').innerHTML = leselect;
  }

Hé voilà, trop fort !!! (un peu d'autosatisfaction ne peut nuire à la bonne humeur !)