Barré du texte dans une liste déroulante.

Bonjour,

J'ai une liste déroulante rien de plus classique.

<select style="float: none;" name="prix_choisi">
<option value="240">1ml - 7.70€ - 3.85€</option>
<option value="241">10ml - 11.15€ - 5.58€</option>
<option value="245">30ml - 23.20€ - 11.6€</option>
<option value="242">100ml - 62.40€ - 31.2€</option>
<option value="244">250ml - 137.45€ - 68.72€</option>
<option value="246">500ml - 263.55€ - 131.78€</option>
<option value="243">1000ml - 502.95€ - 251.48€</option>
</select>

J'aimerais donc que le premier prix de chacun des <option> soit barré.

J'ai tenté de mettre le texte entre balise <s></s> (déprécié je sais !) et autre mais sans aucun résultat.
Modifié par ashesheart (03 Mar 2008 - 15:21)

Bonjour

Après une petit recherche je suis tombé la dessus

Et sur l'utilisation de

text-decoration: line-through;

Mais aucun ne fonctionne dans un select mais a coté cela marche sans problème. Donc je ne sais pas si on peut utilisé cela dans une balise de formulaire
Modifié par Halindel (03 Mar 2008 - 15:43)

Merci mais je connaissais déja cette balise CSS. Je l'ai même essayé mais sans aucun résultat. Je te remercie quand même pour ta recherche.

Et en javascript existe-il une méthode qui permet de faire cela ?

Saluton,
Ce que tu cherches à faire ce serait qqe chose dans ce goût là

<select name="prix_choisi">
    <option value="240">1ml - <span style="text-decoration: line-through;">7.70€</span> - 3.85€</option>
    <option value="241">10ml - 11.15€ - 5.58€</option>
    <option value="245">30ml - 23.20€ - 11.6€</option>
    <option value="242">100ml - 62.40€ - 31.2€</option>
    <option value="244">250ml - 137.45€ - 68.72€</option>
    <option value="246">500ml - 263.55€ - 131.78€</option>
    <option value="243">1000ml - 502.95€ - 251.48€</option>
</select> 

Mais, malheureusement ce n'est pas pris en compte.
Et je ne vois pas ce que Javascript pourrait y changer.
Modifié par Maljuna Kris (03 Mar 2008 - 17:02)

C'est exactement sa ! Mais sa ne marche pas comme tu le dis. En javascript j'ai vu qu'on pouvait styliser une liste déroulante donc je me disais (ne connaissant pas du tout le javascript ou trés peu) qu'on pouvait arriver à bidouiller.
Merci de ton aide.

La nuit portant conseil, je me demandais si la solution ne passerait pas par une simulation de liste déroulante avec une liste html <ul><li>.
Il y faudra probablement (et de toutes façons) une bonne dose de CSS et de Javascript, mais ça devrait pouvoir se réaliser.

Bonjour,

L'équivalent de la balise <s></s> est <del></del>.
Elle permet de barrer d'un trait horizontal le teste qu'elle encadre.
Modifié par Cygnus (04 Mar 2008 - 11:28)

Bonjour de nouveau,

Cygnus le problème est que la balise <del> ne fonctionne pas non plus dans la liste déroulante.

Et pour le javascript après un test rapide on ne peux pas modifier une parti spécifique du texte mais son ensemble. Donc je pense que ceux que tu demandes et une question piège car on tourne en rond

Bonjour,

Rapidement:

L'idée de départ est à revoir : confusion entre présentation et structure, perte d'information, manque de robustesse, etc. Les défauts classiques du HTML CSS mal utilisé, si je puis me permettre

La solution structurelle pour SELECT en s'occupant du contenu (sans lequel il n'y a rien) est :

<select style="float: none;" name="prix_choisi">
<option value="xxx" disabled="disabled">1ml - 7.70&#8364;</option>
<option value="240">1ml - 3.85&#8364;</option>
...

Pour plus de faciliités de styles, on en fera:

<select style="float: none;" name="prix_choisi">
<option value="xxx" disabled="disabled" class="disabled">1ml - 7.70&#8364;</option>
<option value="240">1ml - 3.85&#8364;</option>
...

et ensuite, on stylera .disabled de la manière la plus appropriée (en oubliant en effet le line-through, limitations actuelles des navigateurs oblige, hélas).

<edit>Et non, l'astuce, qui ne va pas manquer d'être suggérée ensuite, de la pseudo SELECT en liste UL stylée et javascriptée pour se comporter comme une SELECT mais où on peut mettre des DEL n'est pas recevable </>
Modifié par Laurent Denis (04 Mar 2008 - 12:44)

Solution éditoriale: communiquer sur les réductions de prix en dehors du formulaire, et mettre uniquement les prix en vigueur dans le formulaire.

Florent V. a écrit :
Solution éditoriale: communiquer sur les réductions de prix en dehors du formulaire, et mettre uniquement les prix en vigueur dans le formulaire.

Non. Mettre l'information dans le formulaire est un choix très spécifique, mais pertinent.

Bonjour,

Sortie du contexte de placer un prix barré dans un select, celui-ci est porteur d'information.

Cela me semble donc une erreur de passer par une propriété CSS afin de le barrer ?
La solution de la balise "<del>" n'est-elle pas plus adaptée à la solution du line-through en CSS ?

Me trompe-je ou bien ?

<edit>@Laurent Denis : la solution donnée ne peut-elle pas être mal perçue par l'utilisateur ? Pourquoi faire figurer un élément qui n'est pas sélectionnable ?</edit>
Modifié par yodaswii (04 Mar 2008 - 12:59)

yodaswii a écrit :

<edit>@Laurent Denis : la solution donnée ne peut-elle pas être mal perçue par l'utilisateur ? Pourquoi faire figurer un élément qui n'est pas sélectionnable ?</edit>

Parce qu'il a eu été sélectionnable hier et le sera à nouveau demain une fois la période des soldes terminée, par exemple,, mais que la, présentement, il ne l'est pas. Et que c'est exactement l''information à faire passer . En outre, ça peut simplifier la gestion du formulaire.

Cela dit, comme 99% des sites ne maîtrisent pas l'utilisation de base des formulaires, c'est effectivement un peu inattendu pour beaucoup d'utilisateurs, qui ne voient pas ça souvent. Mais j'ose espérer que dans ce cas précis, on communique par ailleurs sur cette histoire de prix et de soldes: c'est fou comme un comportement technique inattendu car nouveau ne pose plus aucun problème d'ergonomie quand il a été utilisé dans le contexte approprié où il coule tout à coup de source

<edit>Et puis: on a bien vendu AJAX y compris et à commencer par dans les pires conditions d'utilisation. Alors un malheureux petit disabled, à côté, hein, c'est de la gnogniote pour le consommateur . Attendez de voir ce qu'HTML5 lui réserve, à l'usager, en la matière...</>
Modifié par Laurent Denis (04 Mar 2008 - 13:32)

Laurent Denis a écrit :
Parce qu'il a eu été sélectionnable hier et le sera à nouveau demain une fois la période des soldes terminée, par exemple,, mais que la, présentement, il ne l'est pas. Et que c'est exactement l''information à faire passer .

Et si l'information à faire passer est «nous avons fait baisser les prix de cette gamme de produits de 30% de manière définitive»? Ça tient toujours?

a écrit :
Et si l'information à faire passer est «nous avons fait baisser les prix de cette gamme de produits de 30% de manière définitive» ? Ça tient toujours ?

C'est justement cette idée que j'avais derrière la tête (d'où cette interrogation).

On se retrouve dans le select avec des "éléments doublons" (un élément avec un prix et le même élément avec un prix barré en disabled).

En effet, je ne me suis jamais retrouvé face à ce procédé (qui ne me semble pas ergonomique mais probablement du fait de son absence).

Puis-je émettre l'hypothèse que nos éminentes têtes grises se sont fourvoyées au point d'oublier que le souhait initial n'est pas d'avoir des options non-accessibles, mais qu'une partie seulement du texte de l'option soit barrée, celle concernant le prix obsolète, l'option restant selectionnable.
Comme cela ne m'apparaît pas possible avec les <option>s d'un <select>je continue de suggérer de simuler le <select> avec une liste <ul> <li> où la partie barrée pourra aisément être balisée en <del>.

Florent V. a écrit :

Et si l'information à faire passer est «nous avons fait baisser les prix de cette gamme de produits de 30% de manière définitive»? Ça tient toujours?

Cas d'école, en version simplifiée: supermarché en ligne. Lecteur d'écran. Je commande chaque semaine car c'est justement le type de service qui répond parfaitement à mon besoin. Je connais le contenu éditorial par coeur et je zappe donc tout ce dont je n'ai rien à faire en allant directement dans le formulaire remplir mon panier. Si l'info n'est pas dans le panier, flop.

(ce n'est pas qu'un cas d'école. j'ai récemment loupé IRL une promo qui n'était signalée que dans le contenu éditorial, et j'avais laissé tomber la commande car les prix du formulaire n'étaient pas ceux habituels, le résulta laissant fortement penser à une erreur. ça m'a agacé quand on me la signalé , mais agacé...)
Modifié par Laurent Denis (04 Mar 2008 - 14:17)

Maljuna Kris a écrit :
Puis-je émettre l'hypothèse que nos éminentes têtes grises se sont fourvoyées au point d'oublier que le souhait initial n'est pas d'avoir des options non-accessibles, mais qu'une partie seulement du texte de l'option soit barrée, celle concernant le prix obsolète, l'option restant selectionnable.
Comme cela ne m'apparaît pas possible avec les <option>s d'un <select>je continue de suggérer de simuler le <select> avec une liste <ul> <li> où la partie barrée pourra aisément être balisée en <del>.

J'étais sûr que ça allait tomber, ça

Je n'ai pas la tête grise (merci), mais je sais ce que je dis. Puis-je donc redire (voir-ci-dessus) que c'est une énorme sottise, voir une franche crétinerie ? On n'est pas dans un simple formulaire de navigation qui doit ressembler à un SELECT mais devrait aussi, par exemple, s'ouvrir vers le haut, ce qui justifie le détour par UL etc. On est dans un process où les contraintes de robustesse sont un peu plus élevée . On ne détourne pas pour faire des formulaires. Point.

Non ? ça ne se fait pas de le dire ?

Pas grave

Ce serait bien aussi de ne pas parler d'options non accessibles quand elles sont précisément au contraire effectivement accessibles car désactivées mais perceptibles (ce qu'aucun DEL n"est réellement, en fait, compte-tenu des implémentations dans les aides techniques).
Modifié par Laurent Denis (04 Mar 2008 - 14:29)

yodaswii a écrit :

En effet, je ne me suis jamais retrouvé face à ce procédé (qui ne me semble pas ergonomique mais probablement du fait de son absence).

Oui. Ne pas confondre problème d'ergonomie et nouveauté.