Jquery how to scroll the selected option into the visible view?

Question

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

I want the -6 element to scroll to the visible selection field, how can I do this? I would like to use jquery to do the same thing as

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

but how to implement the same with 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

Answer 1

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

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

Answer 2

This works great ...

 $(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; }); }); 

Answer 3

My answer is not much more than applying a solution. How do I scroll through a select list using 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)); }); }); 

Answer 4

You cannot do this with your own option element, since it is not an element like a div. You will need to create markup over the selection, which acts like a drop-down list, but can expand. I am mobile now, so I cannot teach you examples. But there are jquery plugins that allow you to make overlays that you can more easily manage

Find a jquery dropdown or something else and grab one that looks easy enough to work.