After clicking on SELECT box, is it possible to scroll to specific option?

JavaScript
1

I have a SELECT box that, when dropped down / opened, has a scroll bar due to the many options that are populating it. I’d like to make this automatically scroll to the middle of the set of options (50% down) after the tiny down arrow is clicked on from the SELECT element.

Is this possible?

Here’s my markup (the last option is “display:none” because of some jQuery I’m using to hide the default placeholder option value after the down arrow has been clicked-on):

<select id="start"><option value="1996">1996</option>

<option value="1997">1997</option>


<option value="1998">1998</option>


<option value="1999">1999</option>


<option value="2000">2000</option>


<option value="2001">2001</option>


<option value="2002">2002</option>


<option class="current" value="2014">2014</option>


<option value="2015">2015</option>


<option value="2016">2016</option>


<option value="2017">2017</option>


<option value="2018">2018</option>


<option value="2019">2019</option>


<option value="2020">2020</option>


<option value="2021">2021</option>


<option selected="" value="No Selection" style="display: none;">Select Year...</option>



</select>

The current year has a class called “current” added to it by the PHP that generates these options as I plan on adding some CSS to the current year for end user aesthetics.

Here’s the jQuery I have at the moment:

var current_year = (new Date).getFullYear();
$('#start').click(function(){
    $(this).children('option').each(function(i){
        if($(this).val() == 'No Selection'){
            $(this).hide();
        }
    });
});

Any insights into this would be appreciated.

2

With standard HTML you can use the attribute <option selected=“selected”>

If you want something slicker than that you can create a gui with Javascript and pass the data to a hidden field.

3

eruna, what you suggested turned out to be what I did with this jQuery plugin called, “chosen.”

Now all I need to do is center the vertical scroll amount relative to the selected LI within the UL…

<ul class="chosen-results"><li class="active-result" style="" data-option-array-index="1">1994</li>

<li class="active-result" style="" data-option-array-index="2">1995</li>

<li class="active-result" style="" data-option-array-index="3">1996</li>

<li class="active-result" style="" data-option-array-index="4">1997</li>

<li class="active-result" style="" data-option-array-index="5">1998</li>

<li class="active-result" style="" data-option-array-index="6">1999</li>

<li class="active-result" style="" data-option-array-index="7">2000</li>

<li class="active-result" style="" data-option-array-index="8">2001</li>

<li class="active-result" style="" data-option-array-index="9">2002</li>

<li class="active-result" style="" data-option-array-index="10">2003</li>

<li class="active-result" style="" data-option-array-index="11">2004</li>

<li class="active-result" style="" data-option-array-index="12">2005</li>

<li class="active-result" style="" data-option-array-index="13">2006</li>

<li class="active-result" style="" data-option-array-index="14">2007</li>

<li class="active-result" style="" data-option-array-index="15">2008</li>

<li class="active-result" style="" data-option-array-index="16">2009</li>

<li class="active-result" style="" data-option-array-index="17">2010</li>

<li class="active-result" style="" data-option-array-index="18">2011</li>

<li class="active-result" style="" data-option-array-index="19">2012</li>

<li class="active-result" style="" data-option-array-index="20">2013</li>


<li class="active-result current" data-option-array-index="21">2014</li>


<li class="active-result" style="" data-option-array-index="22">2015</li>

<li class="active-result" style="" data-option-array-index="23">2016</li>

<li class="active-result" style="" data-option-array-index="24">2017</li>

<li class="active-result" style="" data-option-array-index="25">2018</li>

<li class="active-result" style="" data-option-array-index="26">2019</li>

<li class="active-result" style="" data-option-array-index="27">2020</li>

<li class="active-result" style="" data-option-array-index="28">2021</li>

<li class="active-result" style="" data-option-array-index="29">2022</li>

<li class="active-result" style="" data-option-array-index="30">2023</li>

<li class="active-result" style="" data-option-array-index="31">2024</li>

<li class="active-result" style="" data-option-array-index="32">2025</li>

<li class="active-result" style="" data-option-array-index="33">2026</li>

<li class="active-result" style="" data-option-array-index="34">2027</li>

<li class="active-result" style="" data-option-array-index="35">2028</li>

<li class="active-result" style="" data-option-array-index="36">2029</li>

<li class="active-result" style="" data-option-array-index="37">2030</li>

<li class="active-result" style="" data-option-array-index="38">2031</li>

<li class="active-result" style="" data-option-array-index="39">2032</li>

<li class="active-result" style="" data-option-array-index="40">2033</li>

<li class="active-result" style="" data-option-array-index="41">2034</li>


</ul>

Any ideas how I would do this? I.e. - if our year is 2014, how would I make the LI corresponding to 2014 be at the center of the scroll amount in the drop-down? I’m assuming it involves something related to scrollHeight but I’m not sure…