How to Pass innerHTML Argument?

Question

Possible Duplicate:
JavaScript retrieving the text of the selected option in select element

<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1"> Option1 </option>
<option value="2"> Option2 </option>
<option value="3"> Option3 </option>
<option value="4"> Option4 </option>
</select>

From the above example, the integer value is being passed to the showUser function by the use of this.value. If instead of passing the value, I wanted to pass the contents of whatever is inside the option tag, like "Option1", how would I do this? I have tried using

showUser(this.innerHTML)

but that doesn't seem to work, or perhaps I'm approaching it incorrectly. I've looked online at options to use getElementByID but then I think I would need a unique ID for every option.

I looked at this previously, however I am trying to avoid element IDs for this particular case. — user1152440, Feb 29 '12 at 16:45
Then just ignore the `getElementById` step. You already have a reference to the element (`this`). Use that. — Felix Kling, Feb 29 '12 at 17:04

T.J. Crowder · Accepted Answer · 2012-03-13T17:21:07.220

4

You'd use:

showUser(this.selectedIndex >= 0 ? this.options[this.selectedIndex].text : '');

See the DOM2 HTML specification's documentation of HTMLSelectElement and HTMLOptionsElement.

edited Mar 13 '12 at 17:21

answered Feb 29 '12 at 15:25

T.J. Crowder

1,031,962
187
1,923
1,875

The above code works perfectly if I replace the double quotes "" with single quotes '' at the end. (I think this is because the onchange is already surrounded by quotes). Thank you for your reply. – user1152440 Feb 29 '12 at 16:42

score 2 · Answer 2 · answered Feb 29 '12 at 15:32

HTML:

<select name="users" onchange="showUser(this)">
    <option value="">Select a person:</option>
    <option value="1"> Option1 </option>
    <option value="2"> Option2 </option>
    <option value="3"> Option3 </option>
    <option value="4"> Option4 </option>
</select>

javascript:

function showUser(obj){
   alert(obj.options[obj.selectedIndex].innerHTML);
}

fiddle : http://jsfiddle.net/vPhq3/1/

score 1 · Answer 3 · answered Feb 29 '12 at 15:30

1

In this context, this refers to the <select> element, not the selected <option>. I think you want to do showUser(this.options[this.selectedIndex].innerHTML)

answered Feb 29 '12 at 15:30

Mike C

3,077
22
29

How to Pass innerHTML Argument?

3 Answers3