HTML Combo Box selected Item's value

Question

Im trying to make this HTML combo box equal to a value.

<select name="file_type"> <option value=".jpg">.JPG</option> <option value=".png">.PNG</option> <option value=".gif">.GIF</option> </select>

So when i select jpg on my web page, does that mean that file_type = .jpg? I'd think so.

So then im trying to call that value from javascript, like so:

var fileType = document.getElementByID("file_type").value;

is that how it is done? How else can I get the value of the selected item in the combo box?

Regards

Solution

First your control has no ID attribute set only name so you need to add the id to the html

<select id="file_type" name="file_type" >

Then the way you get the selected of a combo is like:

var selectCtrl = document.getElementById("file_type");
var selectedItem = selectCtrl.options[selectCtrl.selectedIndex];

This selectedItem has to properties value and text:

selectedItem.value //<--  ".jpg"

and

selectedItem.text //<-- ".JPG"

Online Demo