jquery, how to scroll the selected option into visible view?

Question

Here I created a sample to help me be understood, http://www.jsfiddle.net/BLvsF/

I want the item-'a6' to be scrolled into the visible select box, how can I make it? I'd like to use jquery to do same as

$(document).ready(function() {
    $('#btn').click(function() {
        document.getElementById('a6').scrollIntoView();
        });
});

but, how to implement the same using jQuery?

I tried using .get(0).scrollIntoView(). but still not applicable.

$(document).ready(function() {
    $('#btn').click(function() {
        $('#a> option:selected').clone(false).appendTo('#b').get(0).scrollIntoView();
    });
});

http://www.jsfiddle.net/CYQfD/

Thanks, Elaine

give the a6 item a `selected="selected"` or isnt it what you want? — Yoram de Langen, Feb 01 '11 at 08:42
Please provide markup for the users so they dont have to leave this site — Luke, Feb 01 '11 at 08:47

score 2 · Answer 1 · edited May 23 '17 at 10:33

My answer is not much more than applying the solution of How to scroll a select list with JavaScript or jQuery? to your jsfiddle:

http://jsfiddle.net/BLvsF/58/

$(document).ready(function() {
   $('#btn').click(function() {
     var $s = $('#a');
     var optionTop = $s.find('[value="a6"]').offset().top;
     var selectTop = $s.offset().top;
     $s.scrollTop($s.scrollTop() + (optionTop - selectTop));
   });
});

score 2 · Accepted Answer · answered Mar 13 '13 at 23:18

2

just replace the button handler with this line of code, and you are done.

$('#a').val('a6').scrollIntoView();

answered Mar 13 '13 at 23:18

d.popov

4,175
1
36
47

score 2 · Answer 3 · answered Feb 01 '11 at 11:59

2

This works fine...

$(document).ready(function() {
    $('#btn').click(function() {
        //document.getElementById('a6').scrollIntoView();
        var target = $("#b");
        $('#a> option:selected').clone(false).appendTo(target);
        target.get(0).selectedIndex = target.get(0).options.length - 1;

    });
});

answered Feb 01 '11 at 11:59

Luke

8,235
3
22
36

a trick :) but changed selectedIndex, can do, I perfered using another way. – Elaine Feb 04 '11 at 07:35

score 0 · Answer 4 · answered Feb 01 '11 at 08:44

0

You cannot do that with native option element, since it is not an element like a div. You will have to create a markup over the select that acts like a dropdown, but is extendable. Im right now mobile so i cannot schow you some examples. But there are jquery plugins that let you make the overlay, that you can control easier

Search for jquery dropdown or something and take one that looks easy enough to work with.

answered Feb 01 '11 at 08:44

Luke

8,235
3
22
36

hey, I got it resolved, using .get(0).scrollIntoView(), much easier than I previously thought. thanks anyway. – Elaine Feb 01 '11 at 09:04
yes, this is only scroll view to the top. I found another link http://stackoverflow.com/questions/1805808/jquery-scrollintoview but which is still not applicable in Firefox3.6. so, now, I'm still in researching. – Elaine Feb 18 '11 at 01:52

jquery, how to scroll the selected option into visible view?

4 Answers4