CODEWITHSUNDEEP
javascripthtml
meWantToLearn
meWantToLearn

Reputation: 1700

javascript change select option text

Im trying to modify the text of the first select option via javascript. But it empties the entire select option

 <select name='stuff'>
      <option value="a"> Pepsi </option>
      <option value= "b"> Juice </option>
 </select>


<script type="text/javascript">
    document.getElementsByName('stuff')[0].innerHTML = "Water";
</script>

Upvotes: 25

Views: 57594

Answers (3)

Satya Ranjan Sahoo
Satya Ranjan Sahoo

Reputation: 1086

You can try this:

 $('select[name=stuff] option:first').html("abcd");

Upvotes: 5

Florin Pop
Florin Pop

Reputation: 5135

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>

Upvotes: 0

CodingIntrigue
CodingIntrigue

Reputation: 78595

You want to read from the options collection and modify the first element in there:

document.getElementsByName('stuff')[0].options[0].innerHTML = "Water";

Upvotes: 37

Related Questions