automatically position to an option in a drop down select box

Issue

how to position to an option in a select box when opened but the initial value should be empty?

ex:

<select>
<option value="" disabled selected style="display:none"></option>//<--- Initial value
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option> // <--- Automatically points here when opened
<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 value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
</select>

Solution

http://jsfiddle.net/vcGrr/

Using Jquery it is simple enough:

$("select").focus(function(){
    $("select option").filter(function() {

   return $(this).text() == "2014"; 
}).prop('selected', true);

});

Thanks for pointing out that my fiddle did not match the code - correct fiddle is above

Answered By - Graham Ritchie