HTML/JS: How to change option value of select type using JS

Question

I've been trying to figure out how to set a value to a an option in a select type. But no matter how much I try to understand I just can't (feels ashamed)..

So I was hoping that you guys could help me since you've helped me so many times before.. :)

Let's say we have:

<select name="box" id="test">    
<option value='tval'>Content</option>

shouldn't this next code change the text from 'Content' to 'box'?

function changeContent(form){
form.document.getElementById('test').options['tval'].value = 'box';
}

or am I completely wrong here? I've looked up so many different articles but no one could help me understand how to do this..

Thanks guys!

Richard A · Accepted Answer · 2013-02-19 23:39:01Z

11

If You need to change the text rather than the value;

function changeContent(){
     document.getElementById('test').options[0].text = 'box';
}

To set both the value and text;

function changeContent(){
     var opt= document.getElementById('test').options[0];
     opt.value =  'box';
     opt.text = 'box';
}

edited Feb 19, 2013 at 23:39

answered Jan 3, 2012 at 17:22

Richard A

2,10015 silver badges13 bronze badges

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

6 Comments

DoobyScooby Over a year ago

tried this, does not work.. If this is accurate then i'll have to check the other bits of code to see if i made an error.. which i dont think.. this is really tricky when you're new to it.. =) thanks for answer=)

nav Over a year ago

@Mr.Havoc it is probably because you are doing form.document, try just document.getEle...

DoobyScooby Over a year ago

Thanks.. the form. was the problem... Why is that?? The JS and HTML are in different files... confused thanks everyone who answered!

nav Over a year ago

@Mr.Havoc I assume form was a DOM element and as such that object wont have access to the document variable (form.document was probably throwing a Javascript error in your console), that is only present in window.document or simply put just document.

nav Over a year ago

@Mr.Havoc click the spanner next to the address bar, go to Tools > Javascript Console

|

Heldraug · Accepted Answer · 2012-01-03 17:23:41Z

1

No, value is the actual value of the option element, what will be sent when the user submits the form. What you are trying to access is the HTML of the option element, you would have to access it with something like:

form.document.getElementById('test').options['tval'].innerHTML='box'

answered Jan 3, 2012 at 17:23

Heldraug

2561 gold badge3 silver badges10 bronze badges

1 Comment

DoobyScooby Over a year ago

like i commented before, does not work.. if this is accurate I'll have to check the rest of my code for errors.. thanks alot for answer.. :)

PAULDAWG · Accepted Answer · 2012-01-03 17:27:40Z

1

That will change the value from 'tval' to 'box'

I think what you are looking for is the inner text of the option.

W3CSchools.com has an example of what you are looking for in javascript. You did want javascript, correct?

http://w3schools.com/js/tryit.asp?filename=try_dom_option_settext

answered Jan 3, 2012 at 17:27

PAULDAWG

7905 silver badges21 bronze badges

Comments

nav · Accepted Answer · 2012-01-03 17:30:52Z

1

Drop the form. part and use:

document.getElementById('test').options[0].innerHTML = 'box';

See http://jsfiddle.net/hMqFE/

answered Jan 3, 2012 at 17:30

nav

3,1151 gold badge23 silver badges24 bronze badges

Comments

Pavan · Accepted Answer · 2012-01-03 17:35:03Z

1

You should use index of the option here. Here is the working example http://jsfiddle.net/LaMJ9/

Code

document.getElementById('test').options[0].value = 'box';

Edit

addded alerts for previous and new values at jsfiddle http://jsfiddle.net/LaMJ9/1/

edited Jan 3, 2012 at 17:35

answered Jan 3, 2012 at 17:24

Pavan

4,3391 gold badge24 silver badges25 bronze badges

Collectives™ on Stack Overflow

HTML/JS: How to change option value of select type using JS

5 Answers 5

6 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related