<sélect> ne montre que le premier caractère de l'option sélectionnée

Question

J'ai une boîte de sélection standard que je remplis à l'aide de jquery en ajoutant des options, mais pour une raison quelconque, IE9 n'affiche que le premier caractère de l'option sélectionnée. Inutile de dire que cela fonctionne parfaitement dans FireFox et Chrome, mais je dois supporter IE9. J'ai essayé les modes de compatibilité IE9, mais cela n'a fait aucune différence, pas plus que le style de la sélection ou de l'option.

Quelqu'un a-t-il déjà rencontré ce problème ? Quelle en est la cause ? Comment l'avez-vous résolu ?

Exemple de code simplifié :

<select id="selectCCY" ValueColumn="ccyID" DisplayColumn="ccySymbol" ></select>

$.each(res.result, function (key, value) {  
    $('#selectCCY').append('<option value="' + value[$('#selectCCY').attr('ValueColumn')]+ '">' + value[$('#selectCCY').attr('DisplayColumn')] + '</option>');
});

res.result est un simple tableau json comme ceci :

[{"ccyID":1,"ccySymbol":"GBP"},{"ccyID":2,"ccySymbol":"AUD"},{"ccyID":3,"ccySymbol":"USD"}]

OH BUGGER !!! ça marche bien dans mon exemple simplifié, donc le problème est ailleurs. Désolé. Le code original est trop long et complexe pour être collé ici, mais je vous ferai savoir quand je trouverai la réponse.

quelque temps plus tard....

OK, j'ai résolu le problème par un appel ajax dans une boucle $(selector).each(). La boucle passe par toutes les cases de sélection et remplit les options de manière asynchrone. Si je fais un appel synchrone, les boîtes de sélection ont la bonne largeur et s'affichent correctement, mais si c'est un appel asynchrone, les boîtes de sélection n'affichent que le premier caractère, comme dans l'image. Je travaille toujours sur ce problème et je vous recontacterai.

Je veux toujours savoir ce qui peut causer l'affichage incorrect d'une boîte de sélection. Je peux contourner le problème et faire en sorte qu'elle s'affiche correctement, mais cela ne répond pas à la question. C'est juste une sélection avec des options, ça devrait toujours fonctionner, non ?

après un week-end à ignorer le problème ....

J'ai trouvé une solution de rechange. Avant de faire l'appel ajax pour remplir la boîte de sélection, je mets d'abord la propriété css display à 'none', puis je la remplis et enfin, quand l'appel ajax et le remplissage sont terminés, je supprime la propriété css display 'none'.

Je ne sais donc toujours pas pourquoi IE ne m'aime pas, mais nous avons au moins une solution.

Answer 1

Dans mon cas, je n'avais pas de crochet d'événement pour masquer la sélection avant que la requête ajax ne se déclenche, et j'ai donc dû forcer un redessin de l'élément de sélection après coup. La ré-application de la largeur existante semble fonctionner :

$("select").width($("select").width());

Answer 2

C'est un problème propre à IE. Tout d'abord, définissez la propriété css display de la boîte de sélection sur 'none', puis remplissez-la via votre appel ajax, enfin, lorsque l'appel ajax est terminé et que la boîte de sélection est remplie, supprimez la propriété css display 'none' de la boîte de sélection.

Answer 3

En me basant sur la réponse de Jim, je passe la liste déroulante dans cette méthode :

// force redraw to get around bug in IE.
// NOTE that this removes width from the style attribute.
function forceRedraw(jqueryObject) {
    jqueryObject.css('width', 0);
    jqueryObject.css('width', '');  // remove from style tag
}

Cela permet de contourner le bogue dans IE, et laisse la largeur de l'élément là où elle était avant l'appel de la méthode. à condition que la largeur est spécifiée dans le CSS, et non dans l'attribut de style.

Answer 4

J'utilise angularjs et je rencontre également ce problème dans ie8/ie9. Cette approche/contournement a fonctionné pour moi : par exemple Avec le html ressemblant à ceci :

<select ng-show="data.showSelect" ng-cloak ng-model="data.model" ng-options="l.id as l.name for l in data.items></select>

J'ai fait exécuter ce code après le chargement des données de la liste déroulante et il résout le problème.

$timeout(function(){$scope.data.showSelect = true;},100);

Je suppose que vous pourriez également intégrer cette solution dans une directive si vous aviez plusieurs zones du site nécessitant cette solution.

Answer 5

J'avais des callbacks dans mon cas, donc mettre l'affichage à none pendant qu'on le remplit n'était pas une option pour moi, cependant, j'ai pu élaborer sur la réponse de @Daniel Brinks pour résoudre mon problème . Il s'avère qu'une fois qu'un élément est ajouté et que l'affichage est changé de none à nothing, tous les futurs éléments ajoutés seront parfaits en utilisant jquery et dans un widget Donc si vous essayez de réparer votre widget pour qu'il fonctionne dans IE, cela peut vous être utile

dans la fonction _create du widget :

this.availableFields = $("<select multiple='multiple' name='AvailableFields'></select>")
                                .addClass("ui-fieldselector-available-select")
                                .css("display", "none")
                                .appendTo( this.element );

dans la fonction _init du widget :

buildAvailableItem - ajoute à la sélection

puis ajouter à un tableau qui garde la trace de l'état des widgets

var $this = this;
                //IE HACK Part 1--
                $this.buildAvailableItem("Loading...", "Loading..." );
                $this.availableList.push("Loading...");
                //----------------
    //do stuff, here I initialize some functionality, like drag and drop, add click events, etc.
                //IE HACK Part 2--
                $($this.availableFields).css("display", "");
                $this.removeAvailableOption("Loading...");
                //----------------
    // AJAX adding

J'utilise normalement une fonction appelée addAvailableItem qui gère la création de l'élément et son ajout à la liste, mais cette fonction déclenche également un événement, et je ne voulais pas qu'un événement soit déclenché pour l'élément "Loading...".

Si, pour une raison quelconque, quelqu'un utilise un navigateur très lent, il verra "Loading..." avant que celui-ci ne soit supprimé et que les éléments ajax ne soient ajoutés...

Si quelqu'un veut une version plus facile à copier et à coller, faites-le moi savoir.

pour référence, voici l'élément de construction :

buildAvailableItem: function (display, value)
        {
            $("<option>" + display + "</option>").val(value).appendTo(this.availableFields);
        },