警报事件侦听器取决于所选的选项 JavaScript

Question

我正在学习 JS 事件并将它们放入 int HTML。我在做

var myCountriesSelect = document.querySelector("#mySelect");

function init() {
  var countries = ['USA', 'France', 'Italy', 'Brazil', 'Colombia', 'Belize', 'Venezuela'];
  for (var i = 0; i < countries.length; i++) {
    var opt = countries[i];
    var el = document.createElement("option");
    el.innerHTML = opt;
    el.value = opt;
    myCountriesSelect.appendChild(el);
  }
}

@charset "UTF-8";
body {
  text-align: center;
  background-size: cover;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  padding: 1em 0 1em 1em;
  border: 1px solid #107177;
  border-radius: 0;
  position: relative;
  border-right-width: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
}

select:focus {
  outline: none;
  border-color: #169ca4;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
</head>

<body onload="init();">
  <select id="mySelect">
    <option value="-1">Select your country</option>
  </select>
</body>

</html>

这个练习，但我不知道如何添加一个事件侦听器来触发 select 列表中 select 国家/地区的警报。

说明是：

使用内部HTML 属性将所有这些国家添加到#mySelect select。
然后，将侦听器添加到 'change' 事件，并在用户 select 发送时显示 selected 国家/地区并发出警报。

Answer 1

您可以按如下方式更新代码：-

var myCountriesSelect = document.querySelector("#mySelect");

function init() {
  var countries = ['USA', 'France', 'Italy', 'Brazil', 'Colombia', 'Belize', 'Venezuela'];
  for (var i = 0; i < countries.length; i++) {
    var opt = countries[i];
    var el = document.createElement("option");
    el.innerHTML = opt;
    el.value = opt;
    myCountriesSelect.appendChild(el);
  }
}

myCountriesSelect.addEventListener("change", function(event){
  alert(event.target.value)
});

Answer 2

回答是为了弄清楚一些事情。

答案：使用change event listener

将 myCountriesSelect 移动到 init 函数中，使其在可用之前不被访问
使用myCountriesSelect.addEventListener("change",function() { alert(this.value); });提醒

function init() {
  var myCountriesSelect = document.querySelector("#mySelect");
  var countries = ['USA', 'France', 'Italy', 'Brazil', 'Colombia', 'Belize', 'Venezuela'];
  for (var i = 0; i < countries.length; i++) {
    var opt = countries[i];
    var el = document.createElement("option");
    el.innerHTML = opt;
    el.value = opt;
    myCountriesSelect.appendChild(el);
  }
  myCountriesSelect.addEventListener("change",function() { alert(this.value); });

}

@charset "UTF-8";
body {
  text-align: center;
  background-size: cover;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  padding: 1em 0 1em 1em;
  border: 1px solid #107177;
  border-radius: 0;
  position: relative;
  border-right-width: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
}

select:focus {
  outline: none;
  border-color: #169ca4;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
</head>

<body onload="init();">
  <select id="mySelect">
    <option value="-1">Select your country</option>
  </select>
</body>

</html>

更好的答案：

删除内联事件处理程序
不要重复自己
添加加载事件处理程序，以便元素在使用前存在

const countries = ['USA', 'France', 'Italy', 'Brazil', 'Colombia', 'Belize', 'Venezuela'];
window.addEventListener("load", () => {
  const sel = document.getElementById("mySelect");
  // arrow functions do not have "this" so use event.currentTarget
  sel.addEventListener("change", e => console.log(e.currentTarget.value));
  sel.innerHTML += countries.map(country => new Option(country, country).outerHTML)
})

@charset "UTF-8";
body {
  text-align: center;
  background-size: cover;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  padding: 1em 0 1em 1em;
  border: 1px solid #107177;
  border-radius: 0;
  position: relative;
  border-right-width: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
}

select:focus {
  outline: none;
  border-color: #169ca4;
}

<select id="mySelect">
  <option value="-1">Select your country</option>
</select>

警报事件侦听器取决于所选的选项 JavaScript

Alert Event Listener depends on the option selected JavaScript

javascript

dom

onchange

onclick

dom-events