CODEWITHSUNDEEP
javascriptjqueryscrolldrop-down-menu
redbmk
redbmk

Reputation: 4796

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

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

At first I thought I could just use javascript to select an option past the one I want, then set it back to the correct option. I've played with scrollTop and scrollTo, but none of them seem to give me what I need. I've been testing it in Chrome, but it also needs to work in Firefox and IE. Any ideas?

Edit: I tried the scrollTo plugin but it doesn't seem to work for drop-downs. 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
});

Upvotes: 4

Views: 8958

Answers (4)

user3270059
user3270059

Reputation: 1

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>

Upvotes: 0

redcap3000
redcap3000

Reputation: 968

I ran into this problem... my solution doesn't really use jquery (although the page itself does...) I thought this was more appropriate for what I was doing; and easier to implement than jquery. The problem I was having was properly making an HTML form update after javascript was used to get _GET params to pass off to ajax ... after the user hit 'submit' they would lose all of their selections. 

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;
}

Upvotes: -1

Arxisos
Arxisos

Reputation: 2729

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

Edit - Final Solution: Because a drop-down list is brower-handled and can't be manipulated very well, you have to recreate the behavior of a drop-down list yourself. Look at the comments for more information.

Upvotes: 4

BentOnCoding
BentOnCoding

Reputation: 28158

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

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

Upvotes: -1

Related Questions