Changement text d'un select en fonction de la value retournée
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
<script type="text/javascript">
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);
}
</script>
code HTML :
<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>
D'avance un grand merci car là je sèche !!!
