JQuery Select Box and Loop Help

Question

Grazie per aver letto. Sono un po 'nuovo in jQuery e sto cercando di creare uno script che posso includere in tutti i miei siti Web per risolvere un problema che mi fa sempre impazzire ...

Il problema: Caselle selezionate con opzioni lunghe vengono tagliate in Internet Explorer. Ad esempio, queste caselle di selezione: http://discoverfire.com/test/select.php

In Firefox vanno bene, ma in IE, le opzioni sono tagliate alla larghezza della selezione quando scendono.

La soluzione: Quello che sto cercando di fare è creare uno script che posso includere in qualsiasi pagina che eseguirà le seguenti operazioni:

1. Scorri tutte le selezioni sulla pagina.

2. Per ogni selezione: A. Scorri le sue opzioni. B. Trova la larghezza dell'opzione più lunga. C. Associa una funzione per espandere la selezione a quella larghezza a fuoco (o forse fai clic su ...). D. Associa una funzione per ridurla alla larghezza originale in sfocatura.

Sono riuscito a fare la maggior parte del passaggio 2 per una casella di selezione.

Ho scoperto che ottenere la larghezza delle opzioni era un problema (specialmente in IE), quindi ho fatto un giro e copiato il testo di ciascuna opzione su un intervallo, ho misurato la larghezza del campo e ho usato quello più lungo come la larghezza della selezione essere espanso a. Forse qualcuno ha un'idea migliore.

Ecco il codice

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

e selezionare:

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

Speriamo che questo funzionerà per te se vuoi eseguirlo, o puoi vederlo in azione qui: http://discoverfire.com/test/select.php .

Che cosa ho bisogno di aiuto con: Questo richiede un po 'di smalto, ma sembra funzionare bene se specifichi la casella di selezione.

Tuttavia, non riesco a capire come applicarlo a tutte le caselle selezionate sulla pagina con un ciclo. Finora, ho questo:

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

Inoltre, esiste un modo migliore per ottenere la lunghezza dell'opzione più lunga per ciascuna selezione? L'intervallo è vicino, ma non molto esatto. Il problema è che IE restituisce zero per le larghezze delle opzioni delle selezioni effettive.

Qualsiasi idea è molto gradita, sia per le domande poste, sia per eventuali altri miglioramenti al mio codice.

Grazie !!

Answer 1

Per modificare ogni selezione, prova questo:

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

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

  })

});

Il secondo parametro (questo) sulla seconda chiamata jQuery fa riferimento al selettore ('opzione'), quindi è essenzialmente 'tutti gli elementi opzione all'interno di questa selezione'. Puoi pensare a quel secondo parametro che per impostazione predefinita è 'document' se non viene fornito.

Answer 2

Sono stato in grado di replicare i tuoi risultati per tutte le selezioni su una pagina in IE7 utilizzando questo codice, che trovo molto più semplice del metodo span che stai utilizzando, ma puoi sostituire il "ridimensionamento" funziona con qualunque codice soddisfi le tue esigenze.

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);
    });
});