web-dev-qa-db-fra.com

Il est mauvais de placer des balises <span /> dans les balises <option />, uniquement pour la manipulation de chaîne sans styling?

Je voudrais faire des groupes du contenu de texte d'une balise <option />. Disons que j'ai les éléments suivants: <option>8:00 (1 hour)</option>, le modèle temporel 8:00 peut être modifié, puis le texte entre parenthèses (1 hour) peut également être modifié.

Je pensais faire quelque chose comme

<option>
  <span>8:00</span>
  <span> (1 hour)</span>
</option>

Il est mauvais de placer les balises <span /> dans les balises <option />, uniquement pour manipuler des chaînes sans styler?

tagsoptionhtml
50
Rubens Mariuzzo

A partir de la spécification HTML 4.01:

<!ELEMENT OPTION - O (#PCDATA)         -- selectable choice -->

A partir du brouillon de spécification HTML 5:

Modèle de contenu: Texte.

(Même les spécifications HTML 3.2 et HTML 2 disent: <!ELEMENT OPTION - O (#PCDATA)*>)

Un élément d'option ne peut avoir aucun élément enfant. Alors oui, c'est mauvais.

79
Quentin

Vous pouvez utiliser un plugin Javascript pour surmonter cette limitation. Par exemple, le plugin jQuery "Select2" Page d'accueil du plugin Select2 . Je l'utilise dans quelques-uns de mes projets et je pense que c'est assez flexible et pratique.

Il en existe un certain nombre, mais ils font à peu près la même chose: convertir les <select> traditionnels en blocs <div> dotés de fonctionnalités supplémentaires.

4
Ivan Yaremchuk

L'élément option

Modèle de contenu: texte

Non, ça ne va pas. Pensez à conserver les valeurs dans votre script afin de pouvoir les recomposer si nécessaire.

2
Josh Lee

Vous feriez mieux d'utiliser un remplacement HTML pour votre <select> si vous voulez le faire.

2
Diodeus - James MacFarlane

Comme établi par d'autres personnes, et j'ai essayé avec <b> et d'autres balises, <option> ne prend pas les balises en son sein.

Ce que vous pouvez faire, car vous ne pouvez pas utiliser <span> dans une balise <option>,
Vous pouvez utiliser le numéro d’index pour extraire le texte via
document.getElementById (selectid) .options [x] .text où x est l'index pertinent, en tant que variable.

Ensuite, vous utilisez le "(" pour séparer la variable dans le temps et supprimer le dernier caractère qui supprime le ")"

Échantillon:

    <script type="text/javascript">
    function extractSelectText()
    {
    var text = document.getElementById("main").options[1].text
    /* 
    var tlength = text.length
    var splitno = tlength - 1
    var text2 = text.slice(0, splitno)
    var textArray = text2.split(" )")
    var time = textArray[0]
    var hours = textArray[1]
    }
    </script>

Le changer est beaucoup plus simple:

    <script type="text/javascript">
    function changeSelectText()
    {
    /* add your code here to determine the value for the time (use variable time) */

    /* add your code here to determine the value for the hour (use variable hours) */
   var textvalue = time + " (" + hours + ")"
   document.getElementById("main").options[1].text
   }
   </script>

Si vous utilisez une fonction for, vous pouvez modifier chaque valeur de la sélection en remplaçant 1 par 2, 3, etc., et définir une fonction d'intervalle défini pour l'actualiser en permanence.

1
dp4

Une option d’édition serait d’utiliser une correspondance de modèle sophistiquée pour mettre à jour le contenu. Il sera plus lent et nécessitera plus de ressources et dépendra de la régularité du format, mais ne nécessitera aucune modification HTML. Ce qui me préoccupe, cependant, concerne l'accessibilité et l'expérience utilisateur. Il est difficile pour un logiciel de lecture d'écran de saisir des valeurs, mais cela peut également dérouter les autres utilisateurs.

0
cdeszaq