基本下拉菜单

Question

我正在尝试添加一个基本的下拉菜单，提供 5 个可能的 select 离子。当您在下拉列表中 select 时，右侧将有另一个字段给出该 selection 的答案，即：

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

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

Answer 1

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

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

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/>

基本下拉菜单

Basic Dropdown Menu

html

css

textbox

textfield

dropdown