Modifier valeur du texte des options d'un select en fonction de la value

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:

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:

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 !!!