JQuery Select Box and Loop Help

Merci d'avoir lu. Je suis un peu nouveau pour jQuery et j'essaie de créer un script que je peux inclure dans tous mes sites Web pour résoudre un problème qui me rend toujours fou …

Le problème: sélectionner des boîtes avec de longues options coupées dans Internet Explorer. Par exemple, sélectionnez ces cases: http://discoverfire.com/test/select.php

Dans Firefox, ils sont bien, mais dans IE, les options sont coupées à la largeur de la sélection lorsqu'elles sont déroulées.

La solution: Ce que je cherche à faire, c'est créer un script que je peux inclure dans n'importe quelle page qui fera ce qui suit:

• Heroku pour le nœud:! Heroku push rejeté, aucune application compatible Cedar n'a détecté
• Calcul de la hauteur verticale d'un texte SVG
• Phantomjs pdf to stdout
• Comment utiliser JQuery / Javascript pour faire défiler une page lorsque le curseur est en haut ou en bas de l'écran?
• Comment Ember.js fait référence à Grunt.js précompilé les modèles Handlebars?

1. Bouclez tous les choix sur la page.

2. Pour chaque sélection: A. Bouclez ses options. B. Trouver la largeur de l'option la plus longue. C. Liez une fonction pour étendre la sélection à cette largeur sur la mise au point (ou peut-être cliquez …). D. Liez une fonction pour réduire sa largeur d'origine sur le flou.

J'ai réussi à faire la plus grande partie de l'étape 2 pour une boîte de sélection.

J'ai constaté que l'amplitude des options était un problème (en particulier dans IE), j'ai donc passé en boucle et copié le texte de chaque option sur une portée, mesuré la largeur de la largeur et utilisé la plus longue comme la largeur à laquelle la sélection sera étendue . Peut-être que quelqu'un a une meilleure idée.

Voici le code

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

Et la sélection:

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

Espérons que cela se déroulera pour vous si vous voulez l'exécuter, ou vous pouvez le voir en action ici: http://discoverfire.com/test/select.php .

Ce dont j'ai besoin d'aide: cela nécessite un peu de polissage, mais semble fonctionner si vous spécifiez la case à cocher.

Cependant, je ne parviens pas à comprendre comment l'appliquer à toutes les cases sélectionnées de la page avec une boucle. Jusqu'à présent, j'ai ceci:

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

De plus, existe-t-il une meilleure façon d'obtenir la durée de l'option la plus longue pour chaque sélection? La portée est proche, mais pas très exacte. Le problème est que IE renvoie zéro pour les largeurs d'option des choix réels.

Toutes les idées sont les bienvenues, tant pour les questions posées que pour toute autre amélioration de mon code.

Merci!!

• L'objet GoogleUser n'a pas la méthode grantOfflineAccess?
• Comment éviter le shake lorsque nous pivotons sur un élément et que nous définissons sa frontière?
• Évitez la page de défilement / saut lorsque l'ancre est dans l'URL
• Création de SVG en ligne avec JS en HTML5
• Appeler javascript depuis Dart

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

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