automatically position to an option in a drop down select box - html

Question

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>

Answer 1

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

Answer 2

Did you mean..
<option value="2014" selected>2014</option>

Answer 3

Set id to your <select> tag
<select id="ddl">
At the end of document add javascipt
<script type="text/javascript">
var firstclick=0;
document.getElementById("ddl").onclick=function(){
if(firstclick==0){
document.getElementById("ddl").selectedIndex=11;
firstclick=1;
}
}
</script>

Answer 4

Here is a jQuery version: jsfiddle
Relevant HTML:
<select>
<option value="" disabled selected style="display:none"></option>
...
<option id="2014" value="2014">2014</option>
...
</select>
jQuery:
var oldValue = null;
$( function ()
{
$('select').click(function(){
var s = $(this);
val = s.val();
oldValue = val;
if( val == null )
{
document.getElementById("2014").selected = true;
}
});
});
Update
Slightly modified version that contains purely jQuery selectors is here: jsfiddle.
Only change is to set 2014 to selected:
$("#2014").prop('selected', true);

Answer 5

Put selected on the option you want by default to be shown as follows-
<select>
<option value=""></option>
<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" selected>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 value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
</select>
Fiddle

Answer 6

You can’t. Implementations of select element work so that initially the default value is shown. Moreover, if a value like “2014” were shown but the default value were actually empty, it would seriously mislead users. You should reconsider the original problem (the unspecified problem that made you want to achieve something that cannot be achieved).
The behavior you describe could be simulated using CSS and JavaScript, by constructing something that looks like a select element but has been coded entirely differently.