Получить HTML выбрать значение выбранной опции тега в JavaScript?

Question

У меня есть тег выбора:

//$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>

И мне нужно получить значение выбранного параметра с помощью js. Я пытался так:

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

    .

    .
}

Но это возвращает «неопределенный». Любые идеи?

Answer 1

Вместо использования встроенного onchange добавьте прослушиватель событий для выбора с помощью 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>