Comment aligner le texte d'une listBox

Bonjour,

Voici mon code pour générer une listBox à la volée

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var $listBox = $("#foo"); var $newListBox = $('<select id="foo" ></select>');   var i=1000; for(i=5; i<10000; i*=10){ var $entry = $('<option/>'); $entry.val(i); $entry.text(i + " - bla bla bla");   $newListBox.append($entry); }   $newListBox.replaceAll($listBox);

---

Le problème est que vu que la chaine générée par la variable i est de taille variable, le text " - bla bla bla" n'est pas aligné : y a t-il une methode pour que tout soit aligné ?


PS : c'est bien comme ça qu'il faut faire pour généré ma listBox de manière performante ?

merci d'avance,

Code:

---

1 2	var $listBox = $("#foo"); var $newListBox = $('<select id="foo" ></select>');

---

tu as deux id foo ???
un id doit être unique sur la page ...

sinon pour l'alignement

Code:

---

.css('text-align','center')

---

pourquoi faire un replace et recréer le select alors qu'il te suffit de vider le select avec un empty() et le repeupler ... ??? 8O

http://jsfiddle.net/9eFHs/1/

Citation:

---

Envoyé par SpaceFrog

tu as deux id foo ???
un id doit être unique sur la page ...

---

=> non, vu que je remplace un bloc par un autre : tant que je ne fais pas un .append(), mon bloque est bien non lié à ma page web ?

Citation:

---

Envoyé par SpaceFrog

sinon pour l'alignement

Code:

---

.css('text-align','center')

---

---

=> ce n'est pas ce que je voudrai. Je veux que le caractères '-' de chaque ligne soit les uns en face des autres (verticalement) (remarque : i < 10000 => 4 caractères max). En langage c, ça donnerait un truc du genre : printf("%4s - bla bla bla\n", i);

Citation:

---

Envoyé par SpaceFrog

pourquoi faire un replace et recréer le select alors qu'il te suffit de vider le select avec un empty() et le repeupler ... ??? 8O

---

Pour éviter le rafraichissement intempestif de la page pendant la création de l’élément... mais je ne sais pas du tout si ça change vraiment quelque chose

Je confirme que avec ceci

Code:

---

1 2 3

var $listBox = $("#foo"); var $newListBox = $('<select id="foo" ></select>');

---

je confirme que tu as deux ids identiques dans le dom ...

Sinon pour aligner les - il te faut passer par une font monospace (chasse fixe)
et html et non text

http://jsfiddle.net/9eFHs/2/

Bonsoir

ID : il n'y a pas de doublon, lors de l'incorporation dans le DOM le nouveau remplace l'ancien.

Alignement : il n'y a pas de solution CSS valable dans tous les navigateurs, la solution de SpaceFrog (ajout de caractère insécable) est la seule qui fonctionne partout.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

var jObjSelect = $( '<select id="foo"></select>' ), jObjOption = $( '<option value="0">"0"</option>' );   for ( var i = 5; i < 10000; i *= 10 ){ jObjOption .clone( true, true ) .val( i ) .text( i + " - bla bla bla" ) .appendTo( jObjSelect ); }   jObjSelect.replaceAll( "#foo" );

---

@daniel
tu veux dire que tant qu'il n'y a pas d'append, l'objet n'est pas dans le DOM ?

Code:

---

var $newListBox = $('<select id="foo" ></select>');

---

ça parait logique vu que les selecteurs recherchent dans le document, et que sans append l'objet n'est qu'une variable js.

Par contre nul besoin de faire un replace de la balise select ici vu qu'il s'agit juste d'en modifier le contenu si je ne m'abuse ...

Oui et oui, seul le remplacement du contenu est nécessaire.

oki merci