javascript function not getting dropdown text

Question

i am using javascript to get the text of selected item from dropdown list. but i am not getting the text. i am traversing the dropdown list by name..

my html dropdownlist is as:

<select name="SomeName" onchange="div1();">
 <option value="someVal">A</option>
 <option value="someOtherVal">B</option>
 <option value="someThirdVal">C</option>
</select>

and my javascript is as:

function div1() { 
 var select = document.getElementsByName("SomeName"); 
 var result = select.options[select.selectedIndex].text;
 alert(result);
 }

can you please help me out..

• Jayantha Lal Sirisena: why don't you give an id to dropdown and use document.getElementById ?

Answer 1

Option 1 - If you're just looking for the value of the selected item, pass it.

<select name="SomeName" onchange="div1(this.value);">
 <option value="someVal">A</option>
 <option value="someOtherVal">B</option>
 <option value="someThirdVal">C</option>
</select>
function div1(val)
{
 alert(val);
}

Option 2 - You could also use the ID as suggested.

<select id="someID" name="SomeName" onchange="div1();">
 <option value="someVal">A</option>
 <option value="someOtherVal">B</option>
 <option value="someThirdVal">C</option>
</select>
function div1()
{
 var ddl = document.getElementById("someID");
 var selectedText = ddl.options[ddl.selectedIndex].value;
 alert(selectedText);
}

Option 3 - You could also pass the object itself...

<select name="SomeName" onchange="div1(this);">
 <option value="someVal">A</option>
 <option value="someOtherVal">B</option>
 <option value="someThirdVal">C</option>
</select>
function div1(obj)
{
 alert(obj.options[obj.selectedIndex].value);
}

Answer 2

getElementsByName returns an array of items, so you'd need:

var select = document.getElementsByName("SomeName"); 
var text = select[0].options[select[0].selectedIndex].text; 
alert(text);

Or something along those lines.

Edit: instead of the "[0]" bit of code, you probably want either (a) to loop all items in the "select" if you expect many selects with that name, or (b) give the select an id and use document.getElementById() which returns just 1 item.

Answer 3

The problem with the original snippet posted is that document.getElementsByName() returns an array and not a single element.

To fix the original snippet, instead of:

document.getElementsByName("SomeName"); // returns an array

try:

document.getElementsByName("SomeName")[0]; // returns first element in array

EDIT: While that will get you up and running, please note the other great alternative answers here that avoid getElementsByName().

• James Hill: You can't assume that the first element in the array will be the select that you want. Also, getElementByName is going to be more expensive than a proper getElementById. I don't think this is a good solution.
• jglouie: at least one reason the poster's code is not working is because the output is an array. getElementById() is better yes, but there's even a better solution out there that avoids both getElementBy*.
• James Hill: I think the point is that your response wasn't the answer to his question, although it had a ring of truth to it. I agree that there is an great option that doesn't use getElementBy*, that's why I included two examples of that in my response.