Question

请注意，我对编码还很陌生，并且正在为学校做一些简单的作业。所以，请对我轻松一点。：-）

所以我的问题之一是创建一个包含所有行星名称的数组的网页。我做起来很容易。

<script>
var planets = ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune", "Pluto"];
</script>

到目前为止，太好了。下一步要求使用数组在选择对象中显示行星的名称。我也设法使它起作用，尽管花了点时间弄乱了。

Planets
<select id="planetSelect">
    <script>
        for (var p = 0; p < 9; ++p) {
            document.write("<option value='p'>");
            document.write(planets[p]);
            document.write("</option>");
        }
    </script>
</select>

知道了。现在，我的页面显示一个带有所有行星名称的下拉菜单……现在的最后一步是让该网页显示在下拉菜单中选择时的行星数量和卫星的引力因子。（可以轻松地搜索此信息，而不是我遇到的问题。）我不确定如何将信息正确地绑定到下拉选择/数组并显示出来。不知如何开始和进行这项工作。任何帮助表示赞赏！：-）

Answer 1

您可以将JS分离到另一个文件中，并通过动态创建<select>标签来填充<option>元素。然后，当<select>元素更改时，您可以触发一组条件并将其写入<h1>，在本示例中，我只是添加了有关火星和地球的信息。希望这对您有所帮助。 Fiddle

var planets = ["-", "Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune", "Pluto"];
//Get the <select> element
selectElement = document.getElementById("planetSelect");

//Dynamically populate the select element with the option
for(var i=0; i<planets.length; i++){
	option = document.createElement("option");
  selectElement.append(option);
  option.setAttribute("value", planets[i]);
  option.innerText =planets[i];
}

//When the <select> element changes it will trigger a condition
//if it matches it will display the information in the <h1>
selectElement.onchange = function(){
//This will get the value of the selected option
  item = selectElement.options[selectElement.selectedIndex].value;
  moonData = document.getElementById("moonCount");

  if(item == "Mars"){
    moonData.innerHTML = "Mars has 2 moons.";
  }
  if(item == "Earth"){
    moonData.innerHTML = "Earth has 1 moons.";
  }

}

<select id="planetSelect">

</select>

<h1 id="moonCount">
  
</h1>

Answer 2

您可以尝试做的一件事是使用卫星和重力因子制作两个平行的阵列。然后您可以执行以下操作：document.write(moons[p]); document.write(gravity[p]);被选中时。

Answer 3

创建主体并将其链接到您创建的下拉菜单。它不应该影响脚本的工作方式，我建议您去看看w3-school，因为它们在下拉菜单显示中有很多信息

从数组的选择选项中显示HTML显示信息？

3 个答案: