2011-04-15 12 views
39

Me gustaría crear grupos del contenido de texto de una etiqueta <option />. Digamos que tengo lo siguiente: <option>8:00 (1 hour)</option>, el patrón de tiempo 8:00 se puede modificar, luego el texto entre paréntesis (1 hour) también se puede modificar.Es malo poner las etiquetas <span /> dentro de las etiquetas <option />, solo para la manipulación de cadenas y no para el estilo?

Yo estaba pensando en hacer algo así como <option><span>8:00</span><span> (1 hour)</span></option>

Es malo para poner etiquetas en el interior <span /><option /> etiquetas, sólo para la manipulación de cadenas no peinar?

+0

Sería útil agregar iconos de glifo en las opciones, pero supongo que HTML 5 no admite etiquetas de opción que contengan glifos =/ – Ninjaxor

Respuesta

69

De la especificación HTML 4.01:

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

Desde el proyecto de especificación HTML 5:

modelo de contenido: texto.

(Incluso los HTML 3.2 y HTML 2 especificaciones decir: <!ELEMENT OPTION - O (#PCDATA)*>)

Un elemento opción no puede tener elementos secundarios. Entonces sí, es malo.

+0

¿Qué versión de la especificación indica esto? – cdeszaq

+3

Todas las versiones que incluyen formularios. – Quentin

+0

¡Entonces me corrijo! Gracias por la info. – cdeszaq

0

Una opción para la edición sería utilizar una coincidencia de patrones sofisticados para actualizar el contenido. Será más lento y requerirá más recursos, y depende de qué tan regular sea el formato, pero no requiere ninguna modificación HTML. Mi preocupación, sin embargo, sería sobre la accesibilidad y la experiencia del usuario. Tener valores cambiantes es difícil de detectar para el software lector de pantalla, y también puede confundir a otros usuarios.

2

The option element

modelo de contenido: texto

No, no está bien. Considere mantener los valores en su secuencia de comandos para que pueda recomponerlos cuando sea necesario.

2

Será mejor que utilice un reemplazo HTML para su <select> si desea hacerlo.

1

Según lo establecido por otras personas, y lo he intentado con <b> y otras etiquetas, <option> no toma etiquetas dentro de él.

Lo que puede hacer, ya que no se puede utilizar dentro de una etiqueta <span><option>,
Usted puede utilizar el número de índice para extraer el texto a través de
document.getElementById (selectid) .OPTIONS [x] .text donde x es el índice relevante, como una variable.

Entonces lo que hacemos es utilizar el "(" dividir la variable en el tiempo, y eliminar el último carácter, así que elimina el ")"

muestra:

<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> 

Cambiándola es mucho más 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 utiliza una función para la que puede cambiar cada valor del selectivo reemplazando 1 con 2, 3 y así sucesivamente, y poner una función de intervalo configurado para actualizar constantemente i t.

5

Puede utilizar un complemento de Javascript para superar esta limitación. Por ejemplo, el complemento jQuery "Select2" Select2 plugin homepage. Lo uso en algunos de mis proyectos y creo que es bastante flexible y conveniente.

Hay varios de ellos, pero hacen lo mismo: convertir el tradicional <select> en bloques <div> con una funcionalidad extra.

Cuestiones relacionadas