Im trying to modify the text of the first select option via javascript. But it empties the entire select option
You want to read from the options collection and modify the first element in there:
document.getElementsByName('stuff')[0].options[0].innerHTML = "Water";
I think this should work:
<select name='stuff'>
<option id="first" value="a"> Pepsi </option>
<option value= "b"> Juice </option>
</select>
<script type="text/javascript">
document.getElementById("first").innerHTML = "Water";
</script>
You can try this:
$('select[name=stuff] option:first').html("abcd");