条件下拉菜单

Question

我正在尝试弄清楚如何让你在我的下拉菜单中选择一些东西，它会在HTML中写下‘你想要...’。

以下是我的代码

​

function latte1() {
  if (document.getElementById("latte").click) {
    alert("You like Latte")
  } else {
    document.write("You like Something else")
  }
}

<option id="latte" onclick="latte1()">Latte</option>

​

任何帮助我们都将不胜感激

Answer 1

您必须从一个<select>元素开始，该元素在做出选择时引发change事件。在该事件中，this.value引用选定的值。

​

var drinkSelect = document.getElementById("drink");
var outputDiv = document.getElementById("output");
drinkSelect.addEventListener("change",function(){
  outputDiv.innerText = "You like " + this.value;
})

<select id="drink">
  <option value="">Which drink would you like?</option>
  <option>Latte</option>
  <option>Capuccino</option>
  <option>Americano</option>
  <option>Tea</option>
</select>
<div id="output"></div>

​

Answer 2

试着这样做：

​

function latte1() {
  var latte = document.getElementById("latte");
  
  //the first latte below can be replaced with any other element
  latte.insertAdjacentHTML("afterend", "<p>" + (latte.click ? "You like Latte" : "You like Something else") + "</p>");
}

<option id="latte" onclick="latte1()">Latte</option>

​

此代码标识页面中的一个元素(在本例中为#latte)，并在其后面添加一个包含文本的<p>元素。

Answer 3

我假设您希望使用select dropdown和show selected option

​

function latte1(ele) {
  document.getElementById("selected_option").innerText = "You want " + ele.value;
}

<select onchange="latte1(this)">
  <option value="" disabled selected>Choose option</option>
  <option value="Latte">Latte</option>
  <option value="Something else">Something else</option>
</select>
<p id="selected_option"></p>

​