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

【问题标题】：Display select tag options in list but hide text when select box is closed在列表中显示选择标签选项，但在选择框关闭时隐藏文本
【发布时间】：2019-11-27 17:28:33
【问题描述】：

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

我的问题是，只要选择一个项目，我想在文本字段中隐藏所选选项，但同时我希望能够在Windows机器上看到列表中的文本（选择背景是白色的) 当我去更改我的选择时。

是否可以在关闭时仅显示列表中的选项而不显示文本字段中的选项？

【问题讨论】：

标签： html css html-select

【解决方案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>

【讨论】：