web-dev-qa-db-fra.com

Comment faire défiler une liste de sélection avec JavaScript ou jQuery?

J'ai un tag de sélection:

           <select size="3"> 
           <option value="1">value 1</option> 
           <option value="2">value 2</option> 
           <option value="3">value 3</option> 
           <option value="4">value 4</option> 
           <option value="5">value 5</option> 
           <option value="6">value 6</option> 
           <select>

Maintenant, il affiche les 3 premières options, Comment puis-je faire défiler pour voir les éléments de 3-5 ou 4-6 en utilisant jQuery ou JavaScript pur?

javascriptjqueryhtml
18
Zemzela

.scrollTop() peut fonctionner:

$('select').scrollTop(30);

Et vous pouvez faire défiler jusqu'à un élément particulier en utilisant ceci:

var $s = $('select');

var optionTop = $s.find('[value="3"]').offset().top;
var selectTop = $s.offset().top;

$s.scrollTop($s.scrollTop() + (optionTop - selectTop));

Essayez ici: http://jsfiddle.net/kj9p4/

Remarque: ne fonctionne pas dans Chrome.

26
Arnaud Le Blanc
 $("select").scrollTop($("select").find("option[value=4]").offset().top);

Il suffit de définir les sélecteurs appropriés pour l'élément sélectionné et les valeurs à l'intérieur

3
gvelkov

J'ai construit cette extension qui est une solution plus appropriée à ce problème. Il est flexible et réutilisable et s’appuie sur jQuery. http://jsfiddle.net/db86eu91/4/

;(function(){
/**
The MIT License (MIT)

Copyright (c) 2015 Márcio Reis [email protected]

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
$.fn.ScrollToValue = function(target){
    var $select = $(this);
    if (!$select.length) return;

    var value = target;

    //how many pixels is the select list scrolled from the moment we run this code???
    var distanceScrolledFromTop = $select.scrollTop();
    //how many pixels separate the top of the page from the <select> element that we pretend to manipulate
    var offsetSelect = $select.offset().top;
    //assuming a offset().top of 0 on our list how many pixels separate our target option from the top of the page? 
    var offsetElement = $select.find('[value=' + value + ']').offset().top + distanceScrolledFromTop;

    //Because the offset of our element is always bigger than the offset of our select box, we must subtract the offset of our target element by the offset of our list. That's it
    $select.scrollTop(offsetElement - offsetSelect);
}

})();
2
Lothre1

Ou vous pouvez simplement utiliser le focus ().

$("select").find("option[value=4]").focus();
$('select option[value="banana"]').focus();
1
swedishboy

Coffescript utilise jquery (coffeescript traduit directement en javascript)

exports.mylist_scroll_to  = (value) ->
    element = $("#mylist")[0]
    item_height = element.scrollHeight/element.length
    $("#mylist").scrollTop(item_height*(element.selectedIndex))
1
miguelangelajo

Vous pouvez utiliser la fonction val() de votre liste. Utiliser le dernier élément de ceux que vous souhaitez afficher comme argument

$("#foo").val('5');

Cela montrera 3-5.

0
lukad

Bien que ce soit à partir de 2011, je faisais face à un gros problème avec Primefaces, car j'utilise beaucoup de listes de sélection.

Lorsque je charge des éléments d'une base de données afin de renseigner de nombreuses zones de liste, elles ne sont pas défilées par défaut.

J'ai corrigé cela en créant une fonction JavaScript.

// Cette fonction est utilisée dans les listes de sélection primefaces contenant de nombreux éléments (qui n'utilisent pas la balise HTML 'valeur de l'option = "XXX" sélectionné "). Ainsi, par défaut, si l'élément sélectionné est hors de vue, comme dans le bas de l'écran, le défilement ne s'exécute pas du tout. 

Pour utiliser la fonction ci-dessous, vous devez placer un appel javascript dans votre zone de liste, comme oncomplete = "autoScrollListBox ('# form \: lixtboxID');"

Vous pouvez personnaliser cette fonction pour parcourir/parcourir d’autres listes, telles que dataTables ou des noms ui - ****** - ***** personnalisés (il suffit de les modifier ci-dessous).

function autoScrollListBox(id) {
    var listContainer=id+'  .ui-selectlistbox-listcontainer';
    var listContainerList=id+'  .ui-selectlistbox-listcontainer  .ui-selectlistbox-list';

    var listTop = $(listContainerList).offset().top;
    var selectedContainer=id+ ' .ui-state-highlight';
    var selectedOptionTop =$(id+' .ui-state-highlight').offset().top;
   $(listContainer).animate( {scrollTop:selectedOptionTop-listTop});
    }
0
Ivan Rolim

Voici une solution de contournement à cette

Travailler demo

Code

$(function(){
    //Select the last option in the range which you want to scroll to
    var lastOption = $("select").find("option[value=5]")
        //Store the selection state
        var isSelected = lastOption.is(":selected");

        lastOption.attr("selected", true)//This will scroll to the option
            .attr("selected", isSelected); //Restore the selection state
});
0
ShankarSangoli