javascript change select option text

Question

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>

If you're just setting text, use textContent instead of innerHTML — ndugger
– ndugger, Commented Sep 19, 2014 at 13:24
possible duplicate of How to Change The Selected Option of HTML Select Element? — laaposto
– laaposto, Commented Sep 19, 2014 at 13:25
@RokoC.Buljan Depends on his target platform, but then you'd use a combination of innerText and textContent, but innerHTML is hardly appropriate here. — ndugger
– ndugger, Commented Sep 19, 2014 at 13:27
@Frinsh Just for the record, FF does not support innerText, so you would have to do a short polyfill, in which case you should polyfill textContent, and not the other way around. — ndugger
– ndugger, Commented Sep 19, 2014 at 15:08

CodingIntrigue · Accepted Answer · 2014-09-19 13:24:00Z

37

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

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

answered Sep 19, 2014 at 13:24

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andre Nel Over a year ago

shouldn't it be: document.getElementsByName('stuff').options[0].innerHTML = "Water";

CodingIntrigue Over a year ago

@AndreNel Nope, getElementsByName returns an array-like object, so you want to pick the first one in that array :)

Andre Nel Over a year ago

Ah of course I see its using getElementsByName I was thinking of getElementById... so I was thinking: document.getElementById('stuff').options[0].innerHTML = "Water"; ... which get one select but on Id and not name rather than what was given: document.getElementsByName('stuff')[0].options[0].innerHTML = "Water"; ... sorry... :)

Satya Ranjan Sahoo · Accepted Answer · 2014-09-19 13:28:17Z

5

You can try this:

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

answered Sep 19, 2014 at 13:28

Satya Ranjan Sahoo

1,0967 silver badges24 bronze badges

2 Comments

ndugger Over a year ago

OP did not ask for jQuery, nor does this question have the jQuery tag.

Genki Over a year ago

Same question and I want to use to jQuery - thanks for contributing.

Florin Pop · Accepted Answer · 2014-09-19 13:27:49Z

0

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>

answered Sep 19, 2014 at 13:27

Florin Pop

5,1454 gold badges29 silver badges60 bronze badges

1 Comment

Paweł Piwowar Over a year ago

also works : document.getElementById("first").text= "Water";

Collectives™ on Stack Overflow

javascript change select option text

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related