I have a form which onchange passes values to a javascript function. I have managed to get this.value and student.value passed but this.title does not return anything.

How would i go about getting the title of the option?

Thanks

<form>
<select id="student" style="width:100%">
<option value="">--</option>
<option value="">A</option>
</select>

<select id="course" onchange="showarchive(this.value, this.title, student.value)" style="width:100%"/>
<option value="">--</option>
<option value="" title="" class=""></option>
</select>

I have a form which onchange passes values to a javascript function. I have managed to get this.value and student.value passed but this.title does not return anything.

How would i go about getting the title of the option?

Thanks

<form>
<select id="student" style="width:100%">
<option value="">--</option>
<option value="">A</option>
</select>

<select id="course" onchange="showarchive(this.value, this.title, student.value)" style="width:100%"/>
<option value="">--</option>
<option value="" title="" class=""></option>
</select>

• javascript
• forms

5 Answers 5

this.options[this.selectedIndex].title

This is the title of the selected option.

Here is a JSFIDDLE.

Why go to all that trouble of typing all those arguments? everything you need can be gotten from the event object, just change:

<select id="course" onchange="showarchive(this.value, this.title, student.value)">

To:

<select id="course" onchange="showarchive(event)">

and change your function a bit:

function showarchive (e)
{
    e = e || window.event;//just for safety
    var select = e.target || e.srcElement;//select.id === course now
    var selected = select.options[select.selectedIndex];//your freshly selected option element here
    var title = selected.title;//etc...
    //as an added bonus:
    if (e.preventDefault)
    {
        e.preventDefault();
        e.stopPropagation();
        return e;
    }
    e.returnValue = false;
    e.cancelBubble = true;//redundant: onchange doesn't bubble in IE
}

That way, you have access to everything you need and more: you can cancel the event itself, and manipulate its behaviour.

this in that onchange method corresponds to the SELECT object and not the selected OPTION object. You should get hold of the selected OPTION and then access the title attribute.

You can get it something like this:

function getSelectedText(elementId) {
    var elt = document.getElementById(elementId);

    if (elt.selectedIndex == -1)
        return null;

    return elt.options[elt.selectedIndex].text;
}

and in onchange:

showarchive(this.value, getSelectedText('course'), student.value);

Here is a sample (different example) http://jsfiddle.net/gbsandeep/Dk3nh/

you can perform

mySelect.options[mySelect.selectedIndex].innerText

to get the value.