基本下拉菜单

Question

我试图添加一个基本的下拉菜单，提供 5 种可能的选择。当您在下拉列表中选择此选项时，右侧将有另一个字段为该选项提供该答案，即：

选择法国（在下拉菜单中），右侧的字段框给出答案：巴黎。

我正在使用 HTML、CSS - 抱歉，我不太擅长编码，想知道是否有人可以提供帮助。谢谢。

Answer 1

看到这个。您需要使用 javascript 来更改第二个字段的文本。 我只做了三个选择，剩下的两个加起来应该不会太麻烦。

请注意 countryInput.value 给出了选项的“名称”，而不是显示的文本。 如果您需要解释 javascript 的工作原理，有比 stackoverflow 更好的网站。

function cityChange() {
  var countryInput = document.getElementById("country");
  var cityInput = document.getElementById("city");
  var city = "";
  
  switch (countryInput.value) {
    case "france":
      city = "Paris";
      break;
    case "slovakia":
      city = "Bratislava";
      break;
    case "germany":
      city = "Berlin";
      break;
  }
  
  cityInput.value = city;
  
}

<select id="country" onchange="cityChange()">
  <option disabled selected> -- select a country -- </option>
  <option value="france">France</option>
  <option value="slovakia">Slovakia</option>
  <option value="germany">Germany</option>
</select>
<input type="text" id="city" readonly/>