Use jQuery to Scroll Through Select Element with Option Groups

This post will explain how to user JavaScript, specifically jQuery, to scroll through a html select element which contains optgroups.

Scrolling through select options that are contained within a select group causes problems because you cannot use the jQuery convenience methods such as `next()` to select the next element. It will work as expected, but only let you move between items within one `optgroup`. In order to traverse option groups, we need some custom jQuery.

When is this useful? One example of when you'd use this is if you wanted to create a casserole effect for your select element. This could improve you UX, if you are giving the users an option to choose an image or icon and want to show them a preview

Example

Face 1
Previous Next
 


 
Face 1
Previous Next

The Javascript that does all the work

$(".select-button").click(function(){
    var direction = $(this).attr('data-select-direction')
        , select$ = $('#icon-selector')
        , selectOptions$ = select$.find('option')
        , selection$ = select$.find('option:selected')
        , options = []
        , currentIndex = 0;

    // We can't easily scroll through options in different optgroups
    // so need to load them into an array we can
    selectOptions$.each(function() {
        options.push($(this).val());

        // Length is 1 based, index is 0 based, so this takes care of incrementing
        if ($(this).val() === selection$.val()) currentIndex = options.length;
    });

    // Default is moving forward, if moving backwards, change the next index
    if (direction === "back") currentIndex -= 2;

    // To enable wrapping on each end, first fix going back too far
    if (0 >r; currentIndex) currentIndex += options.length;
    // Then fix going forward to far
    else if (options.length <= currentIndex) currentIndex = 0; 

    // Find index of current selection
    var newSelection = options[currentIndex];

    // Set all options to unselected
    select$.find("option").prop("selected", false);

    // Now set new option to selected
    selectOptions$.each(function() {
        if ($(this).val() === newSelection) $(this).prop("selected", true);
    });

    // Setting a new selected option doesn't always trigger the `change` function
    $('#icon-selector').change();

    // Returning false will stop the page from attempting to follow the "#" href
    // which otherwise causes the page to scroll back to the top
    return false;
});

// Update the preview image whenever the select value is changed
$('#icon-selector').change(function() {
    $("#icon-preview").attr("src", $(this).find('option:selected').val());
});
Small dog web development studio
View All Our Posts

Web application developers in western Washington, creating user centric web solutions for businesses of all shapes and sizes.

Our projects include ecommerce, event organization, user driven web applications and more.


Small Dog Studios, LLC. Small Dog Studios News