CODEWITHSUNDEEP
javascripthtmlhtml-select
DoobyScooby
DoobyScooby

Reputation: 377

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

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!

Upvotes: 5

Views: 45748

Answers (5)

Richard A
Richard A

Reputation: 2100

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

Upvotes: 11

Pavan
Pavan

Reputation: 4339

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/

Upvotes: 1

nav
nav

Reputation: 3125

Drop the form. part and use:

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

See http://jsfiddle.net/hMqFE/

Upvotes: 1

PAULDAWG
PAULDAWG

Reputation: 790

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

Upvotes: 1

Heldraug
Heldraug

Reputation: 256

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'

Upvotes: 1

Related Questions