How to get the value of a select drop down in javascript?

Question

How can I alert the value selected by user from a select drop down box in Javascript. In this example I want to store the value inside a variable and alert it to the user.

<script type="text/javascript">

function processmyform() {

    var chosenAnimal = // what goes here

    alert(chosenAnimal);

}
</script>

<form action="">
    <select name="animal" class="favAnimal">
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="bird">Bird</option>
    </select>
    <a href="#" onclick="processmyform()" />
</form>

Are you using a JavaScript framework like jQuery?

Petrus Theron
– Petrus Theron

2010-10-19 17:36:18 +00:00
Commented Oct 19, 2010 at 17:36 — Petrus Theron
– Petrus Theron, Commented Oct 19, 2010 at 17:36

Gabriel McAdams · Accepted Answer · 2010-10-19 17:40:08Z

4

First off, it would be easier if your select box had an id. Then you could use getElementById.

var animalSelectBox = document.getElementById('animal');
alert(animalSelectBox.options[animalSelectBox.selectedIndex].value);

Instead, here is how to do it using getElementsByName (notice this one is plural).

var arr = document.getElementsByName('animal'); //will be an array
alert(arr[0].options[arr[0].selectedIndex].value);

answered Oct 19, 2010 at 17:40

Gabriel McAdams

58.5k12 gold badges67 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tim Goodman Over a year ago

Be careful, though, getElementsByName has non-standard behavior in IE and Opera (gets elements that match name or id), and won't work on certain elements in IE. (See quirksmode.org/dom/w3c_core.html)

Tim Goodman Over a year ago

Should work fine for this example though (although adding an id to the select would be preferable, as everyone seems to agree)

Tim Goodman · Accepted Answer · 2010-10-19 17:35:14Z

1

I'd generally put an id on the select, like id="animal"

Then you could do:

var animal = document.getElementById("animal");
var animalValue = animal.options[animal.selectedIndex].value;
alert(animalValue);

answered Oct 19, 2010 at 17:35

Tim Goodman

24.1k8 gold badges68 silver badges85 bronze badges

Comments

Onkelborg · Accepted Answer · 2010-10-19 17:35:39Z

1

I would set an id on your select-tag:

<select id="animal" name="animal" class="favAnimal">

Javascript:

var chosenAnimal = document.getElementById("animal").value;
alert(chosenAnimal);

answered Oct 19, 2010 at 17:35

Onkelborg

4,0251 gold badge23 silver badges22 bronze badges

Comments

Harmen · Accepted Answer · 2010-10-19 17:43:31Z

1

Use selectedIndex

<form id="yourForm" action="#">
    <select id="animal" name="animal" class="favAnimal">
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="bird">Bird</option>
    </select>
    <input type="submit" value="Submit" />
</form>

window.onload = function(){
    var selectElement = document.getElementById('animal');

    document.getElementById('yourForm').onsubmit = function(){
        var index = selectElement.selectedIndex;
        alert(selectElement.options[index].value);
        alert(selectElement.options[index].text);
        alert(index);
        return false;
    };
};

edited Oct 19, 2010 at 17:43

answered Oct 19, 2010 at 17:36

Harmen

22.5k4 gold badges57 silver badges77 bronze badges

Collectives™ on Stack Overflow

How to get the value of a select drop down in javascript?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related