html - 在列表中显示选择标签选项，但在关闭选择框时隐藏文本

Question

我正在使用一个选择标签让用户从中选择一个国家。当他们选择一个选项时，我想显示国家代码而不是完整的国家名称。为此，每当发生选择时，select 标记的父 div 都会添加新类，其中内容是国家/地区代码。每当选择一个选项时，父 div 也会添加一个 selection 类。

我的问题是，每当选择一个元素时，我都想在文本字段中隐藏所选选项，但同时我希望能够在 Windows 机器上看到列表中的文本(选择背景为白色) 当我去改变我的选择时。

是否有可能关闭时选择只显示列表中的选项而不显示文本字段中的选项？

Answer 1

我不确定我是否理解你的问题，但听起来你想要一个 <select> “已选择”选项显示的文本与 <select> 的下拉列表中显示的文本不同的字段领域？

如果是这样，您可以利用 <select>元素可以不可见但仍显示其下拉列表 <option>正常列出。通过使用 <select style="position:absolute; opacity:0"> 设置元素样式并将其放置在您要用于显示“选定”值的另一个元素上，您可以在选择一个选项时显示不同的内容。

一个快速的概念验证示例:

function changeLabel(select) {
  document.getElementById('field-label').innerHTML = select.value;
}

#field {
  position: relative;
  display: inline-block;
  border: 1px solid black;
}

#field-label {
  color: blue;
}

#field-select {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

<div id="field">
  <div id="field-label">Click To Select</div>
  <select id="field-select" onchange="changeLabel(this)">
    <option value="" disabled selected>Select A Country</option>
    <option value="CAN">CAN - Canada</option>
    <option value="MEX">MEX - Mexico</option>
    <option value="USA">USA - United States</option>
  </select>
</div>