<html>
<head>
<script>
function insertBeforeSelected()
{
var x=document.getElementById("mySelect");
if (x.selectedIndex>=0)
{
var option=document.createElement("option");
option.text="Kiwi";
var sel=x.options[x.selectedIndex];
try
{
x.add(option,sel);
}
catch(ex)
{
// for IE earlier than version 8
x.add(option,x.selectedIndex);
}
}
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
<input type="button" onclick="insertBeforeSelected()" value="Insert option before selected">
</form>
<p><b>Tip:</b> For the add() method to work properly in IE8 and higher, add a !DOCTYPE declaration to the page. Also notice the extra code for IE prior version 8.</p>
</body>
</html>