时间戳

首页 > 解决方案 > 使用 HTML 下拉菜单显示默认值

javascript - 使用 HTML 下拉菜单显示默认值

问题描述

我创建了一个下拉列表。像这样，下拉菜单在下拉菜单中显示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>

谢谢你！

标签： javascripthtmldropdown

解决方案

只需调用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>

推荐阅读