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!

Answer 1

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';
}

Answer 2

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'

Answer 3

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

Answer 4

Drop the form. part and use:

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

See http://jsfiddle.net/hMqFE/