使用事件目标值获取 select 框的值

Question

我是 Javascript 初学者，边做边学。这里我有一个 select 框，里面有不同汽车的选项。我可以通过这样做轻松地使它工作： var x = document.getElementById("mySelect").value; 但我想使用 ( event.target ) 来完成它。我做错了吗？

<!DOCTYPE html>
<html>
<body>

<p>Select a new car from the list.</p>

<select id="mySelect" onchange="myFunction(event)">
  <option value="Audi">Audi</option>
  <option value="BMW">BMW</option>
  <option value="Mercedes">Mercedes</option>                                                
  <option value="Volvo">Volvo</option>
</select>


<p id="demo"></p>

<script>
function myFunction(event) {
  var x = document.getElementById("mySelect").event.target.value;
  document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>

</body>
</html>

我收到这个错误：

3.html:19 Uncaught TypeError: Cannot read property 'target' of undefined at myFunction (3.html:19) at HTMLSelectElement.onchange

Answer 1

请试试这个。

function myFunction(event) {
  var x = event.target;
  document.getElementById("demo").innerHTML = "You selected: " + x.value;
}

<!DOCTYPE html>
<html>
<body>

<p>Select a new car from the list.</p>

<select id="mySelect" onchange="myFunction(event)">
  <option value="Audi">Audi</option>
  <option value="BMW">BMW</option>
  <option value="Mercedes">Mercedes</option>                                                
  <option value="Volvo">Volvo</option>
</select>


<p id="demo"></p>

使用事件目标值获取 select 框的值

Getting the value of select box using event target value

html

javascript

select

dom-events

drop-down-menu