Geek Answers Handbook

How to scroll a select box to a specific point (using javascript or jQuery)?

I want the selected option to appear in the middle of the drop-down list. When I first load the page, it appears at the bottom of the drop-down list, but if I scroll through it and exit, she remembers that when I open it again. I want it to appear in the middle by default.

At first I thought I could just use javascript to select an option past the one I want, and then return it to the correct option. I played with scrollTop and scrollTo, but none of them seemed to give me what I needed. I tested it in Chrome, but it should also work in Firefox and IE. Any ideas?

Edit: I tried the scrollTo plugin, but it does not work for dropdowns. Take a look at these code snippets

From HTML:

<select id="test"> <option>1</option> <option>2</option> // ........ <option selected="selected">21</option> <option>22</option> // ........ <option>40</option> </select>

From Javascript:

 $(function() { alert( $('#test option:selected').next().text() ); // alerts 22 $().scrollTo('#test'); // scrolls the screen to the drop-down $('#test').scrollTo( $('#test option:selected').next() ); //does nothing });
+4
source share
4 answers

Use this jQuery plugin: http://plugins.jquery.com/project/ScrollTo

Edit - Final Solution: Since the drop-down list is browser-driven and cannot be handled very well, you need to recreate the drop-down list behavior yourself. See comments for more information.

+3
source

What worked for me (in Chrome and Firefox):

 <select onclick="centerSelectedOption(this)"> ... </select> <script type="text/javascript"> function centerSelectedOption(selectBox) { var selectedIndex = selectBox.selectedIndex; var optionCount = selectBox.options.length /* browser shows 20 options at a time (as long as list is long enough) hence a center position of 10 would be fine we can achieve this by briefly selecting the (selectedIndex+10)th option and then back to the actual selectedIndex */ if (optionCount > 20) { var upperIndex = Math.min(optionCount, selectedIndex + 10); selectBox.selectedIndex = upperIndex; // hereby the browser scrolls the options list so that upperIndex is at the end // if the options list was already scrolled down and an option higher up is selected, we have to scroll up again var lowerIndex = Math.max(0, selectedIndex - 9); selectBox.selectedIndex = lowerIndex; // hereby the browser scrolls the options list so that lowerIndex is at the top // finally go back to the actually selected option selectBox.selectedIndex = selectedIndex; } } </script>
0
source

$ ("MyDDL.") Val ('2') ;.

[jQuery.val] checks or selects all radio buttons, check boxes, and select the options that match the set of values.

-1
source

I ran into this problem ... my solution really does not use jquery (although the page itself does ...) I thought this was more suitable for what I am doing; and easier to implement than jquery. The problem I ran into was correctly creating an HTML form update after javascript was used to get the _GET parameters to pass to ajax ... after the user clicked submit they would lose all their choices.

 function getURLParameter(param_name) { // get the _get parameter var check = decodeURI((RegExp(param_name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]); // get the form in the document (by id/name) if(typeof document.myForm[param_name] !== 'undefined'){ var form_param = document.myForm[param_name]; for(key2 in form_param.options) if(form_param.options[key2].value == check){ // change index form_param.selectedIndex = form_param.options[key2].index; return check; } } // Return a 'null' string value if get param isn't there return check; }
-1
source

More articles:


All Articles