Get HTML select tag's selected option's value in JavaScript?

Question

I have a select tag:

//$places = Array("A", "B", "C");
<select onchange="calculate()" class="form-control" id="from" name="from">
    <?php foreach($places as $place){
        echo '<option value="'.$place.'">'.$place.'</option>';
    } ?>
</select>

And I need to get the selected option's value with js. I tried like this:

function $(id){return document.getElementById(id);}
function calculate() {
    var from = $("from").value;
    var to = $("to").value;
    console.log(from);
    console.log(to);
    .

    .

    .
}

But that gives back 'undefined'. Any Ideas?

The code you provided works as intended. Maybe it comes from somewhere else? jsfiddle.net/u2fnv8xk — blex
– blex, Commented Mar 22, 2020 at 15:02
Okay, so I didn't notice that Jquery was added. And my function used a taken name. Thank you! — Patrik Vörös
– Patrik Vörös, Commented Mar 22, 2020 at 15:33

Sajeeb Ahamed · Accepted Answer · 2020-03-22 15:03:38Z

2

Instead of using inline onchange add an event listener to the select by javascript.

const sel = document.querySelector('#sel');
sel.addEventListener('change', function(e) {
	console.log(e.target.value);
});

<select name="sel" id="sel">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

answered Mar 22, 2020 at 15:03

Sajeeb Ahamed

6,4382 gold badges23 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

Get HTML select tag's selected option's value in JavaScript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related