在 JavaScript 中获取 HTML 选择标记的选定选项值？答案

【问题标题】：Get HTML select tag's selected option's value in JavaScript?在 JavaScript 中获取 HTML 选择标记的选定选项值？
【发布时间】：2020-03-22 14:58:07
【问题描述】：

我有一个选择标签：

//$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);
    .

    .

    .
}

但这会返回“未定义”。有任何想法吗？

【问题讨论】：

您提供的代码按预期工作。也许它来自其他地方？ jsfiddle.net/u2fnv8xk
好的，所以我没有注意到添加了 Jquery。我的函数使用了一个取名。谢谢！

标签： javascript html select option

【解决方案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>

【讨论】：