javascript - 使用 HTML 下拉列表显示默认值

Question

我创建了一个下拉菜单。像这样，下拉列表将 1 显示为下拉列表中的默认值，但我还想显示在我首先选择任何内容之前分配给该显示的值。这意味着，在我单击任何内容之前，我希望它默认显示“您选择了:一个”。我怎样才能最好地做到这一点？

function myFunction() {
  var x = document.getElementById("mySelect").value;
  if (x == "one") {
    document.getElementById("demo").innerHTML = "You selected: " + x;
  } else if (x == "two") {
    document.getElementById("demo").innerHTML = "You selected: " + x;
  } else if (x == "three") {
    document.getElementById("demo").innerHTML = "You selected: " + x;
  }
}

<select name="test" id="mySelect" onchange="myFunction()">
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
</select>
<p id="demo"></p>

谢谢!

Answer 1

只需调用myFunction() onload

function myFunction() {
  var x = document.getElementById("mySelect").value;

  if (x == "one") {
    document.getElementById("demo").innerHTML = "You selected: " + x;
  } else if (x == "two") {
    document.getElementById("demo").innerHTML = "You selected: " + x;
  } else if (x == "three") {
    document.getElementById("demo").innerHTML = "You selected: " + x;
  }
}

myFunction(); // call onload

<select name="test" id="mySelect" onchange="myFunction()">
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
</select>

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

<小时/>

更新删除 if 语句

function myFunction() {
  var x = document.getElementById("mySelect").value;

  document.getElementById("demo").innerHTML = "You selected: " + x;
}

myFunction(); // call onload

<select name="test" id="mySelect" onchange="myFunction()">
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
</select>

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