Why index giving incorrect index number

Why index giving incorrect index number

 Following is my code. I am getting index 0, but not 1 and 2.
Any suggestion is greatly appreciate...

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<select id='selectCombo'>
<option value='v1' class='c1'>v1</option>
<option value='v2' class='c1'>v2</option>
<option value='v3' class='c1'>v3</option>

<option value='v4' class='c2'>v4</option>
<option value='v5' class='c2'>v5</option>
<option value='v6' class='c2'>v6</option>

<option value='v7' class='c3'>v7</option>
<option value='v8' class='c3'>v8</option>
<option value='v9' class='c3'>v9</option>
</select>

<script>
$(document).ready(function(){
 
$("#selectCombo").on("change",function(){

alert("index:"+$("#selectCombo option.c1").index("option[value='v2']"));
});
});
</script>

</head>

<body>

</body>
</html>