innerhtml of a select tag does not update selected option

Why does the inner html of the select tag not get updated ?

<select name="cs_position_id_1034362" id="cs_position_id_1034362" class="cs_position_id">
    <option value="1034314">1</option>
    <option value="1034315">2</option>
    <option value="1034316">3</option>
    <option value="1034317">4</option>
    <option value="1034318">5</option>
    <option value="1034319">6</option>
</select>

$("body").on("change", ".cs_position_id", function(){
    var cs_select = $(this);
    var cs_id = cs_select.html();
    var new_cs_id = cs_select.find(":selected").val();
    alert(cs_id);
    alert(new_cs_id);
});

Fiddle: http://ift.tt/1zE0q20