Question

我希望有一个列出不同鸟类的下拉菜单，我希望每个选项都能显示该物种的唯一段落和图像。下面的代码几乎对我有用，但是在页面加载时我希望自动选择第一个选项。

我该怎么做？
这是解决这个问题的最好方法吗？

我是新手，我们非常感谢任何帮助。感谢

＆＃13;

<html>
<body>
  
<select id="opts" selected="selected" onchange="document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].getAttribute('extrainfo')">
  
  <option value="buzzard" extrainfo="The buzzard is by far the most common of all our birds of prey, and its expansion has been dramatic">Buzzard</option>
  <option value="redkite" extrainfo="The red kite is a medium-large bird of prey in the family Accipitridae, which also includes many other diurnal raptors such as eagles, buzzards, and harriers">Red kite</option>
  <option value="sparrowhawk" extrainfo="Habitat and food availability remain the main limiting and controlling factors of sparrowhawk numbers">Sparrow hawk</option>
  
</select>

<div id="ExtraInfo">extra</div>

</body>
</html>

＆＃13;

Answer 1

一种简单的方法是默认情况下将第一个选项文本添加到ExtraInfo div。由于在加载页面时会自动选择选择列表中的第一个选项，因此它将满足您的需要。

<div id="ExtraInfo">The buzzard is by far the most common of all our birds of prey, and its expansion has been dramatic</div>

Answer 2

将自动选择第一个选项。您可能不需要在此处触发更改事件。您可以将第一段写入HTML中的<p>;当您选择其他选项时，它将被覆盖。

另一种方法是在页面加载时通过Javascript触发onchange事件。没有jQuery，这有点棘手，请看这个问题：

https://stackoverflow.com/a/2856602/5742681

如何在pageload上加载第一个下拉选项

2 个答案: