jQuery réglage prop(“sélectionné”, true) sur une liste de sélection dans google Chrome ne fonctionne qu'une fois

Lorsque vous tentez de définir une liste de sélection de l'option sélectionnée pour faites défiler la liste de sélection de cette option, il fonctionne dans tous les navigateurs, sauf pour le Chrome. Dans Chrome il fonctionne une fois, mais les temps ne fonctionnent pas dans Chrome. Comment puis-je m'assurer que le paramètre de l'attribut sélectionné d'une option dans une liste de sélection de défilement de cette option en vue?

Voici un exemple de mon problème - http://jsfiddle.net/Z2rQG/

Le code j'utilise pour sélectionner une option dans une liste pour faire défiler elle en à vue est comme suit:

(function ($) {
    $.fn.scrollToOption = function (option) {
        var _option = $(option, this);
        //if option is in list
        if(_option) {
            //store the selection state
            var isSelected = _option.is(":selected");

            _option.prop("selected", true); //scroll to the option
            _option.prop("selected", isSelected);  //restore the selection state
        }
        return this;
    };
})(jQuery);

Edit: j'ai aussi essayé le scrollTo plugin jQuery, qui ne fonctionne pas aussi bien dans Chrome. Voici un exemple - http://jsfiddle.net/kavun/TW4XK/

Edit: Ici est un plus clair exemple de ce que je suis en train de faire. Sélectionnez les deux options à partir d'une liste de sélection et la liste défiler à la dernière option sélectionnée. Cela fonctionne dans tous les navigateurs, sauf Chrome et Safari. Dans google Chrome, la première sélection permet d'accéder à l'option, mais la deuxième $('#select option[value=""].prop('selected', true); ne pas faire défiler la liste - http://jsfiddle.net/kavun/uhnZH/

Je commence à penser que c'est un bug avec Chrome - code.google.com/p/chromium/issues/detail?id=138217
Votre jsfiddle ne contient pas un élément HTML avec l'ID de test, et il est très difficile de ce que vous attendez qu'il fasse. Essayez-vous de faire défiler jusqu'à un "élément" à la page comme vous l'avez suggéré, ou une valeur d'option dans la liste déroulante?
Il ne fait contenir un élément avec l'ID test <option value="5111" id="test">5111</option>

OriginalL'auteur kavun | 2012-10-04

12

Le comportement du navigateur est incompatible avec l'égard de laquelle l'option se trouve dans la vue lorsque plusieurs options sont sélectionnées. Toutefois, la sélection de l'option à l'aide de son selected propriété et le réglage de la selectedIndex propriété de la <select> élément semble assurez-vous que l'sélectionnez défile à la bonne place dans tous les principaux navigateurs. En utilisant cela, vous pouvez obtenir le bon défilement vertical, sélectionnez les options que vous voulez et ensuite de faire défiler le sélectionner manuellement.

Opéra ne semble pas entièrement en charge scrollTop pour sélectionner des éléments, de sorte que cette solution ne fonctionne pas dans l'Opéra.

Démo: http://jsfiddle.net/uhnZH/10/

Code:
```
function selectAndScrollToOption(select, option) {
    $select = $(select);

    //Store the currently selected options
    var $selectedOptions = $select.find("option:selected");

    //Select the new option using its selected property and selectedIndex.
    //This seems to make the select scroll to the desired place in all major
    //browsers
    option.selected = true; //Required for old IE
    select.selectedIndex = option.index;

    //Measure the vertical scrolling
    var scrollTop = $select.scrollTop();

    //Re-select the original options
    $selectedOptions.prop("selected", true);

    //Scroll to the correct place
    $select.scrollTop(scrollTop);
}
```
cela fonctionne comme je le voudrais, merci. Donc, la clé est pour désélectionner tous et à mettre selectedIndex.
Réglage selectedIndex fait désélectionne tous automatiquement, de sorte que vous pouvez déposer le $selectedOptions.prop("selected", false); ligne. Je vais mettre à jour.
pourquoi cette solution ne fonctionne pas pour moi? Si je sélectionne une valeur, je peux le journal de la console la bonne valeur, mais je vois dans le navigateur, le premier élément...
Quel navigateur?
tout borwser... on peut résoudre ce problème avec une autre solution:

OriginalL'auteur Tim Down
1

Si votre but est simplement de faire défiler jusqu'à une valeur dans la liste déroulante, vous pouvez simplement utiliser val comme démontré dans cette mise à jour du violon:
```
$('#selectList').val(51);
```
Qui va travailler dans n'importe quel navigateur.

Si vous essayez de faire défiler jusqu'à un élément sur la page en fonction de la valeur dans la liste déroulante, vous aurez à mettre en place un exemple qui nous permet d'obtenir un peu plus près ce que vous voulez afin que nous puissions répondre qu'à un scénario spécifique.

Oui, mon but est de faire défiler jusqu'à une valeur dans la liste déroulante. Votre solution fonctionne, mais il permet de désélectionner toutes les autres options. Comment pourrais-je garder tous précédemment sélectionné les options choisies?
Je peux enregistrer l'état comme ça, mais même encore de la dernière ligne de code ne sert pas à faire défiler la liste en Chrome - jsfiddle.net/kavun/gbyjK
Testé dans IE9, Firefox 15, Opera 12. Celles faites défiler la liste à la dernière valeur sélectionnée, mais Chrome 22, et Safari 5 ne PAS faire défiler la liste à la dernière valeur sélectionnée.
Oui, vous avez raison, je n'avais pas compris que tu voulais garder les valeurs sélectionnées et tout simplement ajouter un nouveau. @TimDown semble avoir la réponse à cette! 🙂

OriginalL'auteur Kato

Vous devez vous connecter pour publier un commentaire.