javascript - 如何创建一个 JavaScript 函数来根据 HTML 中选定的选项显示文本？

Question

我正在尝试创建一个函数，根据从下拉列表中选择的内容来更改页面上的文本内容。我希望它处于 onchange 状态，因此只要您选择一个选项，它就会切换。我做了一个循环来遍历所有选项，但是当我测试它时，它总是显示最后一个选项，无论选择什么。我正在从事的项目将会有更多的信息，但在我做这一切之前我需要它能够工作。另外，我对此还很陌生，所以我只熟悉普通 js，并且不知道所有其他 js 技术是如何工作的。

function myFunction() {
  var text = document.getElementById("text");
  var events = document.getElementById('events'),
    event, i;

  for (i = 0; i < events.length; i++) {
    event = events[i];
    if (event.value == "Major") {
      text.innerHTML = "majorevents";
    } else if (event.value == "Event1") {
      text.innerHTML = "event 1";
    } else if (event.value == "Event2") {
      text.innerHTML = "event 2";
    }
  }
}

<select id="events" onchange="myFunction()">
  <option value="Major">Major Events</option>
  <option value="Event1">1st event</option>
  <option value="Event2">2nd event</option>
</select>
<p id="text"></p>

Answer 1

你的 for 循环将遍历所有 <option>在你的<select> 。如"Event2"是最后一个选项标签，它将设置 innerHTML到那个事件。相反，您只需要获取当前选择的 <option> ，所以不需要使用for环形。为此，您可以使用 this.value (通过将 this 传递到 onchange 回调中)，这将为您提供所选选项的值。

此外，由于您只是向页面添加文本(而不是 html)，因此更适合您使用 .innerText或.textContent而不是.innerHTML (因为您只需要在添加 HTML 字符串时使用它)

var text = document.getElementById("text"); // move outside of callback function (no need to get this eleemnt everytime you change your dropdown selection)
function myFunction(element) {
  var event = element.value; // get the value of the select option
  console.log(event);
  if (event === "Major") {
    text.innerText = "majorevents";
  } else if (event === "Event1") {
    text.innerText = "event 1";
  } else if (event === "Event2") {
    text.innerText = "event 2";
  }

}

<select id="events" onchange="myFunction(this)">
  <option value="Major">Major Events</option>
  <option value="Event1">1st event</option>
  <option value="Event2">2nd event</option>
</select>
<p id="text"></p>

虽然上述方法有效，但我建议您在 JS 中处理事件处理(因为它应该由 JS 处理，而不是 html)。为此，您可以使用 .addEventListener('change', fn)在 JS 中添加事件监听器:

var events = document.getElementById('events'); // make sure the DOM has loaded before accessing this
var text = document.getElementById("text");

events.addEventListener('change', myFunction);

function myFunction() {
  var event = this.value; // get the value of the select option
  console.log(event);
  if (event === "Major") {
    text.innerText = "majorevents";
  } else if (event === "Event1") {
    text.innerText = "event 1";
  } else if (event === "Event2") {
    text.innerText = "event 2";
  }

}

<select id="events">
  <option value="Major">Major Events</option>
  <option value="Event1">1st event</option>
  <option value="Event2">2nd event</option>
</select>
<p id="text"></p>