Tri alpha sur texte d'un select
Bonjour,
J'appel mes valeurs depuis ma BDD en JS, pour faire un menu dynamique en 3 niveaux (si valeur select 1 = X alors affiche valeur select 2 correspondant, puis select 3).
Tout marche parfaitement, sauf que je change le texte de mes options du select 2 (category) et que du coup j'ai un classement non cohérent... Je souhaite ajouter un tri alpha sur la nouvelle valeur du texte de l'option (<option value="xxxx">TEXTE</option>) du select dynamiquement créé.
Je ne sais comment et où faire ce nouveau classement/affichage, avant ou après mes "replace", dans le script ou le html. Enfin je suis perdu !!!
Mon JS qui fonctionne :
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
| <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;
}
var strMessage1 = document.getElementById("category") ;
strMessage1.innerHTML = strMessage1.innerHTML.replace('option value="13446">Acier</option>','<option value="13446">Couverts Acier</option>')
.replace('option value="13449">Acier</option>','<option value="13449">Pieces Acier</option>')
.replace('option value="13453">Accessoires</option>','<option value="13453">Auto Accessoires</option>')
.replace('.......etc.........') ;
}
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> |
Le HTML :
Code:
1 2 3 4 5 6 7 8 9
| <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="1739" >MArque 1</option><option value="5794" >MArque 2</option><option value="1753" >...........</option></select>
<div id='category' style='display:inline'>
</div>
<div id='subcategory' style='display:inline'>
</div>
</form> |
D'avance un grand merci.
ne prends as en compte le .remplace
Bonjour,
Merci de vous pencher sur mon problème ..
Alors coté serveur pas possible car cela implique une réorganisation complète de la base ... et avec plus de 15000 références je cherche à contourner le problème ...
le code
Code:
1 2 3 4 5 6 7
| Array.prototype.sort.call(strMessage1.options,function(a,b){
return a.text < b.text
? -1
: a.text > b.text
? 1
: 0;
}); |
fonctionne ... sauf qu'il ne tient pas compte des .replace et affiche les "anciennes" valeur de texte .... c'est là tout mon problème, la fonction doit tenir compte de mes replaces et faire le tri avec les nouvelles valeurs !
j'ai besoin de soleil ...
Le problème reste le meme, a savoir pas de prise en considération des .replace.
J'ai bien le classement alpha sur texte... mais avec les anciens textes !
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
| <script type="text/javascript">
if (window.XMLHttpRequest) {
oXmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
oXmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
function selectManufacturer(id) {
var category, data;
document.getElementById('subcategory').innerHTML = "";
oXmlhttp.open('POST',"recherche-listesderoulantes-resultats.php");
oXmlhttp.onreadystatechange=function() {
if (oXmlhttp.readyState==4 && oXmlhttp.status == 200) {
leselect = oXmlhttp.responseText;
leselect = leselect.replace('<option value="13709">Accessoires</option>','<option value="13709">Accessoires Hommes</option>');.replace('<option value="13709">Accessoires</option>','<option value="13709">Accessoires Femmes</option>');.replace('[....]');
if ( (category = document.getElementById('category')) != null ) {
category.innerHTML = leselect;
if ( (leselect = category.getElementsByTagName("select")[0]) != null ) {
Array.prototype.sort.call(leselect.options,function(a,b){
return a.text < b.text
? -1
: a.text > b.text
? 1
: 0;
});
}
}
}
}
oXmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
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> |
et le html "déployé "
Code:
1 2 3 4 5 6 7 8 9 10
| <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="1739">Marque 1</option><option value="5794">Marques2</option><option value="1753">Marques3</option></select>
<div id="category" style="display:inline"><select style="width: 80%" name="category" onchange="selectCategory(1742,this.value);"><option value="-1">-- Catégorie --</option><option value="31379">Accessoires</option><option value="13737">Accessoires</option><option value="14492">Accessoires </option>[........]</select></div>
<div id="subcategory" style="display:inline"><select onchange="this.form.submit();" style="width: 80%" name="filter_id"><option value="-1">-- Sous catégorie --</option><option value="14497">Amaryllis</option><option value="14508">Arum</option>[......]</select></div>
</form> |
je n'arrive a mettre le doigt sur mon erreur !!!