javascript - example - jquery select

JQuery Select Box y Ayuda de bucle

Question

Gracias por leer. Soy un poco nuevo en jQuery y estoy tratando de hacer un script que pueda incluir en todos mis sitios web para resolver un problema que siempre me vuelve loco ...

El problema: seleccionar cuadros con opciones largas se cortan en Internet Explorer. Por ejemplo, estos cuadros de selección: http://discoverfire.com/test/select.php

En Firefox están bien, pero en IE, las opciones se cortan al ancho de la selección cuando se despliegan.

La solución: lo que estoy buscando hacer es crear un script que pueda incluir en cualquier página que haga lo siguiente:

1. Pasa por todas las selecciones de la página.

2. Para cada selección: A. Pasa por sus opciones. B. Encuentra el ancho de la opción más larga. C. Enlace una función para expandir la selección a ese ancho en el enfoque (o tal vez haga clic en ...). D. Enlace una función para reducir su ancho original en desenfoque.

Logré hacer la mayor parte del paso # 2 para un cuadro de selección.

Descubrí que obtener el ancho de las opciones era un problema (especialmente en IE), así que hice un bucle y copié el texto de cada opción a un lapso, medí el ancho del tramo y usé el más largo como el ancho al que se expandirá . Quizás alguien tenga una mejor idea.

Aquí está el código

<script type=''text/javascript''>

      $(function() {

         /*
         This function will:
            1. Create a data store for the select called ResizeToWidth.
            2. Populate it with the width of the longest option, as approximated by span width.

         The data store can then be used
         */
         // Make a temporary span to hold the text of the options.
         $(''body'').append("<span id=''CurrentOptWidth''></span>");

         $("#TheSelect option").each(function(i){

            // If this is the first time through, zero out ResizeToWidth (or it will end up NaN).
            if ( isNaN( $(this).parent().data(''ResizeToWidth'') ) ) {
               $(this).parent().data( ''OriginalWidth'', $(this).parent().width() );
               $(this).parent().data(''ResizeToWidth'', 0);

               $(''CurrentOptWidth'').css(''font-family'', $(this).css(''font-family'') );
               $(''CurrentOptWidth'').css(''font-size'', $(this).css(''font-size'') );
               $(''CurrentOptWidth'').css(''font-weight'', $(this).css(''font-weight'') );

            }

            // Put the text of the current option into the span.
            $(''#CurrentOptWidth'').text( $(this).text() );

            // Set ResizeToWidth to the longer of a) the current opt width, or b) itself. 
            //So it will hold the width of the longest option when we are done
            ResizeToWidth = Math.max( $(''#CurrentOptWidth'').width() , $(this).parent().data(''ResizeToWidth'') );

            // Update parent ResizeToWidth data.
            $(this).parent().data(''ResizeToWidth'', ResizeToWidth)

          });

         // Remove the temporary span.
         $(''#CurrentOptWidth'').remove();

         $(''#TheSelect'').focus(function(){
            $(this).width( $(this).data(''ResizeToWidth'') );
         });

         $(''#TheSelect'').blur(function(){
            $(this).width( $(this).data(''OriginalWidth'') );
         });


           alert( $(''#TheSelect'').data(''OriginalWidth'') );
           alert( $(''#TheSelect'').data(''ResizeToWidth'') );

      });


   </script>

y el seleccionar:

<select id=''TheSelect'' style=''width:50px;''>
   <option value=''1''>One</option>
   <option value=''2''>Two</option>
   <option value=''3''>Three</option>
   <option value=''42,693,748,756''>Forty-two billion, six-hundred and ninety-three million, seven-hundred-forty-some-odd..... </option>
   <option value=''5''>Five</option>
   <option value=''6''>Six</option>
   <option value=''7''>Seven...</option>
</select>

Esperemos que esto se ejecute para usted si desea ejecutarlo, o puede verlo en acción aquí: http://discoverfire.com/test/select.php .

Con qué necesito ayuda: Esto necesita un poco de pulimento, pero parece funcionar bien si especifica el cuadro de selección.

Sin embargo, parece que no soy capaz de descubrir cómo aplicarlo a todos los cuadros de selección en la página con un bucle. Hasta ahora, tengo esto:

$(''select'').each(
   function(i, select){
      // Get the options for the select here... can I use select.each...?
   }
);

Además, ¿hay una mejor manera de obtener la longitud de la opción más larga para cada selección? El lapso está cerca, pero no es muy exacto. El problema es que IE devuelve cero para los anchos de opción de las selecciones reales.

Cualquier idea es bienvenida tanto para las preguntas formuladas como para cualquier otra mejora en mi código.

¡¡Gracias!!

Answer 1

Para modificar cada selección, intente esto:

$(''select'').each(function(){

  $(''option'', this).each(function() {
    // your normalizing script here

  })

});

El segundo parámetro (esto) en la segunda llamada jQuery alcanza el selecter (''opción''), por lo que es esencialmente ''todos los elementos de opción dentro de esta selección''. Puede pensar en ese segundo parámetro predeterminado en ''documento'' si no se proporciona.

Answer 2

Pude replicar los resultados de todas las selecciones en una página en IE7 utilizando este código, que me parece mucho más simple que el método de extensión que está utilizando, pero puede reemplazar la función de "cambiar el tamaño" con el código que se ajuste a sus necesidades.

function resize(selectId, size){
    var objSelect = document.getElementById(selectId);
    var maxlength = 0;
    if(objSelect){
        if(size){
            objSelect.style.width = size;
        } else {
            for (var i=0; i< objSelect.options.length; i++){
                if (objSelect[i].text.length > maxlength){
                    maxlength = objSelect[i].text.length;
                }
            }
            objSelect.style.width = maxlength * 9;
        }
    } 
}

$(document).ready(function(){
    $("select").focus(function(){
        resize($(this).attr("id"));
    });
    $("select").blur(function(){
        resize($(this).attr("id"), 40);
    });
});