Comment réparer internet explorer, sélectionnez problème lors de l'évolution dynamique des options

J'ai vécu la même question l'autre soir, et après avoir jeté tout ce que je pouvais penser à elle que je suis venu à la conclusion que IE ne veut tout simplement pas gérer la mise à jour des filtres lors de l'utilisation sélectionne.

Ma solution est de changer votre sélectionne pour ressembler à ceci:

 <select class="selectList" ng-repeat="currId in selectedIds" ng-model="selectedIds[$index]"  ng-options="currOption.id as currOption.value for currOption in myObj | myfilter:selectedIds:$index" data-ng-change="fixIE()"></select>

Ils ont maintenant une classe et une ng-changement sur eux. Puis dans votre contrôleur de ce faire plaisir peu de code:

$scope.fixIE = function(){
    //code to check if IE so the other browsers don't get this ugly hack.
    var selectLists = document.querySelectorAll(".selectList");
    for(var x = 0;x  < selectLists.length; x++){
        selectLists[x].parentNode.insertBefore(selectLists[x], selectLists[x]);
    }       
};

Ce qu'il fait est rip les éléments du DOM et de les remplacer dans le même emplacement. Voici un travail de violon jsFiddle

Certaines autres solutions que j'ai essayé et qui n'impliquent pas de javascript, c'étaient des choses comme le basculement de l'affichage et de la visibilité de la sélectionner. Ayant leur zIndex est déplacé. La seule chose que bien sûr fixe c'était ce morceau de code.

J'ai enfin trouvé une solution qui fonctionne pour mes besoins. Fondamentalement, ce qui semble se passer, c'est que le texte de l'option à l'index pointe de l'ancienne corde que l'habitude d'être dans ce lieu. Je crois que la modification de ce texte met à jour les chaînes de caractères et/ou des références. J'ai fait quelque chose comme ceci:

angular.forEach($("select"), function (currSelect) {
     currSelect.options[currSelect.selectedIndex].text += " ";
});

Voici la mise à jour de violon: http://jsfiddle.net/H48sP/35/

Dans mon application, j'ai une directive, lorsque ces sélectionne sont, et je ne element.find("select") au lieu de $("select") de limiter la portée de l'élément de la sélection. Le texte est obligé de rafraîchir et donc affiche correctement après toutes les digérer les cycles d'exécution.

Si vous avez rencontré ce même problème, vous devrez peut-être ajouter un $timeout comme le violon, et/ou vous devrez peut-être plus tard, supprimer l'espace supplémentaire qui a été ajouté à l'option de texte si cela devient un problème.

Le problème semble être lié à l'ordre des options renvoyé par le filtre. Lorsque vous modifiez la dernière option pour A, les autres de sélectionner des options de change. Ce qui semble poser un problème pour IE, c'est que l'option sélectionnée changements de lieu. Dans la première boîte de sélection C est sélectionné dans les options dans l'ordre suivant: A, B, C, D. L'option choisie est la troisième option. Lorsque vous modifiez la suite de sélectionner la zone de G à A, le filtre modifie les options dans la première zone de B, C, D, G. L'option sélectionnée est maintenant le deuxième option, et cela provoque un problème avec IE. Ce peut-être un bug dans Angulaire, ou il peut être un comportement étrange dans IE. J'ai créé une fourche qui travaille autour de cela, assurez-vous que l'élément sélectionné est toujours la première option de l'filtré options:

   var newOptions = [],selected;
    angular.forEach(allOptions, function (currentOption) {
        if (!isIdInUse(selectedIds, currentOption.id)){
            newOptions.push(currentOption);
        }else if(currentOption.id == selectedIds[parseInt(index)]){
            selected = currentOption;
        }
    });
    if(selected){newOptions.unshift(selected);}

http://jsfiddle.net/XhxSD/ (vieux)

Mise à jour:

J'ai fait un peu de débogage et trouvé la ligne qui provoque des problèmes dans IE, mais je ne comprends pas pourquoi. Il semble y avoir un rendu bug ou quelque chose. J'ai créé une autre solution qui ne nécessite pas de réarrangement des options - c'est une directive que les montres de changements sur l'élément select. Si un changement est détecté, il ajoute une option et le supprime immédiatement:

.directive('ieSelectFix',function($timeout){
  return {
    require:'select',
    link: function (scope, element) {
      var isIE = document.attachEvent;

      if(isIE){
        $timeout(function(){
          var index = element.prop('selectedIndex'), children = element.children().length;
          scope.$watch(function(){
            if(index !== element.prop('selectedIndex') || children !== element.children().length){
              index = element.prop('selectedIndex');
              children = element.children().length;
              var tmp =angular.element('<option></option>');
              element.append(tmp);
              tmp.remove();
            }
          })

        });
      }
    }
  }
});

Juste ajouter ie-sélectionnez-fix pour sélectionner des éléments à l'intérieur ng-répète:

<div ng-app="myApp" ng-controller="MyCtrl">
  <select ie-select-fix ng-repeat="currId in selectedIds" ng-model="selectedIds[$index]"  ng-options="currOption.id as currOption.value for currOption in myObj | myfilter:selectedIds:$index"></select><br>
  {{selectedIds}}
</div>

http://jsfiddle.net/VgpyZ/ (nouveau)

Oh, je vais en enfer pour les conseils suivants...!

J'ai essayé ces suggestions, mais aucun n'a fonctionné pour moi.

En fait j'ai été en utilisant Angulaire pour remplir les commandes select avec plusieurs options de chacun.

<select class="cssMultipleSelect" multiple="multiple" ...>

Parfois, Angulaire permettraient d'alimenter ces contrôles, les nouvelles données apparaissent, mais dans IE, vous ne pouviez pas faites défiler vers le haut et vers le bas pour afficher toutes les options.

Mais, si vous appuyez sur la touche F12, la modification de la largeur, et de le remettre à sa largeur d'origine, puis IE allait éclater de nouveau dans la vie de nouveau, et vous pouvez défiler vers le haut et vers le bas dans la liste de valeurs.

Donc, ma solution a été de demander à cet, une seconde après Angulaire avait fini de remplir les commandes:

function RefreshMultipleSelectControls()
{
    // A dodgy fix to an IE11 issue.
    setTimeout(function () {
        $(".cssMultipleSelect").width("");
    }, 1500);
    setTimeout(function () {
        $(".cssMultipleSelect").width(298);
    }, 1600);
}

(Je vous ai dit que c'était un peu louches correction..)

Une autre chose: n'oubliez pas que dans IE11, navigator.appName sera de retour NETSCAPE (plutôt que MSIE ou Microsoft Internet Explorer)... donc soyez prudent lorsque vous testez si votre code est en cours d'exécution sur IE ou sur un navigateur décent.

Vous avez été prévenu..!!

Sur les lignes de Mathew Berg réponse, je l'ai modifié pour fonctionner en utilisant AngularJS directive:

angular.module('select',[]).directive("select", function() {
    return {
      restrict: "E",
      require: "?ngModel",
      scope: false,
      link: function (scope, element, attrs, ngModel) {

        if (!ngModel) {
          return;
        }

        element.bind("change", function() {
            //Fix for IE9 where it is not able to properly handle dropdown value change
            //The fix is to rip out the dropdown from DOM and add it back at the same location
            if (isIE9){
                this.parentNode.insertBefore(this, this);   //this rips the elements out of the DOM and replace it into the same location.
            }
        })
      }
   }
});

De cette façon, le correctif s'applique à tous les select éléments dans le projet et que vous n'avez pas à modifier les balises HTML. J'ai aussi utilisé la méthode suivante pour détecter la version de IE pour définir isIE9 variable true:

var Browser = {
    IsIE: function () {
        return navigator.appVersion.indexOf("MSIE") != -1;
    },
    Navigator: navigator.appVersion,
    Version: function() {
        var version = 999; //we assume a sane browser
        if (navigator.appVersion.indexOf("MSIE") != -1)
            //bah, IE again, lets downgrade version number
            version = parseFloat(navigator.appVersion.split("MSIE")[1]);
        return version;
    }
};

var oldIE = false;      //Global Variable
var isIE9 = false;      //Global Variable
if (Browser.IsIE && Browser.Version() <= 8) {
    oldIE = true;
}

if (Browser.IsIE && Browser.Version() == 9) {
    isIE9 = true;
}

Le rendu sera mis à jour et synchronisés si vous modifiez un attribut. Une modification anodine peut être de la selectedIndex attribut de sa propre valeur:

function fixIEselect() {
    for (var nForm = 0; nForm < document.forms.length; ++nForm) {
        var form = document.forms[nForm];
        var children = form.children;
        for (var nChild = 0; nChild < children.length; ++nChild) {
            var child = children.item(nChild);
            if (child.tagName == "SELECT") {
                alert("Fixed: " + child.name);
                child.selectedIndex = child.selectedIndex; //dummy nop but not
            }
        }
    }
}

fixIEselect();

J'ai une solution de contournement pour le IE de la liste de choix question

Avant De Corriger:http://plnkr.co/edit/NGwG1LUVk3ctGOsX15KI?p=preview

Après Correction:http://plnkr.co/edit/a7CGJavo2m2Tc73VR28i?p=preview

$("select").click(function(){
  $(this).append('<option></option>');
   $(this).find('option:last').remove();

});

J'ai juste ajouté mannequin option pour les dom alors rendre à nouveau la sélection et l'a supprimé.
laissez-moi savoir ce qui fonctionne pour vous